↓Skip to main content

Front End Interview CSS Questions

··4 mins

Here are some of my solutions to some of the Front end developer CSS questions. Not everything is answered, but I tend to update this page on occasion.

What is the difference between classes and ID’s in CSS? #

Classes can be used on multiple elements (and they can have multiple classes), while IDs are intended to be unique and only used on one element throughout the entire DOM.

.class {}
#id {}

Explain CSS sprites, and how you would implement them on a page or site #

Multiple images combined together into a single image. The images are then usually used as a class with background-position to isolate a specific sprite image. This technique saves on multiple HTTP requests but can be a pain to compile, as any changes to the sprite image will need to have the CSS updated with any new positions.

Use something like css-sprite to make your life easier. Or an online generator like csssprites.com.

With HTTP2 though, having a multiple images loaded is no longer much of an issue.

What are your favorite image replacement techniques and which do you use when? #

I’ve always been a fan of lazy loading.

There’s also progressive image loading placeholders.

How would you approach fixing browser-specific styling issues? #

Use a separate stylesheet that only loads when that specific browser is being used. Thankfully, the days of IE specific stylesheets are almost gone.

How do you serve your pages for feature-constrained browsers? #

Polyfills or graceful degradation.

What techniques/processes do you use? #

I use gulp with SASS all the time.

Nowadays, I tend to use webpack, wherein I use SASS as a preprocessor. I then run it through PostCSS using autoprefixer so I don’t have to worry about vendor prefixes. I then use CSS modules to create component specific styles.

Otherwise, I tend to use BEM, but there are plenty of others. Atomic Design is also worth looking into.

What are the advantages/disadvantages of using CSS preprocessors? #

Advantages:

  • Nested tags
  • Mixins
  • Importing other styles in
  • Modularity

Disadvantages:

  • Nested tags are hard to read after a certain point
  • Have to use build tools to compile
  • Easy to abuse (@extend in sass)

Describe what you like and dislike about the CSS preprocessors you have used #

I like everything more with preprocessors and nothing less. As mentioned before, they can be easily abused and can create excess stylesheets if not careful.

List as many values for the display property that you can remember #

  • none
  • block
  • inline
  • inline-block
  • table
  • table-cell
  • flex
  • static
  • inherit

What’s the difference between inline and inline-block? #

Inline displays an element well… inline… As such, it’s not considered a block element, and it allows for elements to render next to another horizontally. You get both when you use inline-block. It’s like using float, but without taking things out of flow.

What’s the difference between a relative, fixed, absolute and statically positioned element? #

  • Static - The default behavior of an element.
  • Relative - Renders the element like it normally would, however you’re able to position the item (top, bottom, left, right) from that starting position.
  • Absolute - Takes the element out of the flow of the document allowing you to position the element within the context of it’s parent.
  • Fixed - Like absolute positioning, but the element will move with the screen.

What existing CSS frameworks have you used locally, or in production? How would you change/improve them? #

Mostly foundation with some bootstrap. With foundation, it’s easy to only use components that you need by importing the SASS components that you need. Otherwise I think the frameworks are way too cookie cutter and it’s easy to notice when a website was created with either.

Have you played around with the new CSS Flexbox or Grid specs? #

Flexbox is fantastic and I suggest that everyone starts using it. It especially makes it easy to vertically center elements.

CSS Grid is looking to be amazing. I haven’t used it yet, but I’m sure it’ll start taking place of some more popular grid frameworks.

Have you ever worked with retina graphics? If so, when and what techniques did you use? #

If you want a great way to create retina graphics, may I introduce you to Sketch.

Is there any reason you’d want to use translate() instead of absolute positioning, or vice-versa? And why? #

Yes, translate do not cause the browser to trigger repaint and layout and instead only acts on the compositor. I tend to only ever use translate/transform nowadays, and only using absolute positioning for an elements initial position. I’ll then translate it from that initial position for better performance.

↑