Interview Questions and Exercises About CSS

Avatar of Chris Coyier
Chris Coyier on (Updated on )

If you’re in the position of needing to interview someone about their skill and knowledge about CSS, it can be a little hard to think of things to ask on-the-fly. I thought I’d think up and round up some ideas for reference.

Exercises To Do

Seeing people’s actual work is just as important as what they say. Seeing people work their through exercises live might be even more important. These are some exercises that aren’t particularly difficult and anybody with CSS experience should be able to do. Watching/listening to them do it could be invaluable. Collab Mode on CodePen is kinda perfect for that (just saying).

Create This Button

I saw this idea on Mobify’s CodePen account. Give people an image of a button, and tell them:

Using CSS properties alone, recreate this button:

This would be a great test of the candidate’s CSS3 skills. This button is loaded with that kind of stuff. Things I would look for:

  • How did they handle multiple borders? box-shadow is probably the best way here.
  • Did they use text-transform: uppercase; for the text? That would be best.
  • How did they handle the stars? Pseudo elements would be a good candidate there. Did they use unicode? Icon font?
  • Did they catch the subtle text-shadow?
  • How did they split the background in the main part of the button? a linear-gradient with no fade would be a good technique there. Or box-shadow.
  • Were they careful with the nested border-radius?

I hope I didn’t ruin Mobify’s hiring process! But honestly, I think this stuff is hard to fake. You can either do it and talk about it, or you can’t.

Fix The Sidebar

The right sidebar here has fallen down below the content. Show me some different ways you could fix that.

Even though the two columns are 75% and 25% wide and floated opposite ways, the sidebar has fallen. The reason is because the columns don’t actually add up to 100% – they add up to more than that due to the padding. There is a number of ways to fix it:

  • Using box-sizing: border-box; on the appropriate elements is the most efficient fix.
  • Using calc() on the widths to remove the 1rem padding is another way.
  • Putting the padding on an added internal wrapper element instead of the columns is a fix that will work with very deep browser support.
  • Adjusting the numbers to make the math work is another way. For instance making the widths of the columns 4% narrower and using 2% for the padding instead.

There are other ways. The more solutions they can think of, the more creative and versatile a problem solver they are.

Make this fixed width design fluid.

Here’s a design. It’s a fixed 800px wide. Do your best at making it fit the screen more appropriately at any screen size.

This is just one ingredient to responsive design (which they should probably at least be familiar with) but it’s an important one. It can help prove they can think spatially and make reasoned choices about layout. I’d look for:

  • Changing the pixel widths to percentages (how did they handle the math?)
  • Did they do anything special for large screens or just small?
  • Did they attempt to use a responsive images solution?
  • Does the new design retain the hierarchy of importance inherit to the original?
  • Did they come back at you with questions? (Lots of things to ask here, including what other resources might be available.)
  • Did they test it? (To make sure it actually works, and find things like missing meta tags.)

Replace this logo markup with an image.

<a href="/" class="logo">Company</a>

Accessible and semantic image replacement has been a CSS topic for a lot of years and the “best way” has morphed over the years. Asking them to show you how it could be done a number of ways would be a way to get insight into how long they’ve really been working with CSS. Not only is it directly an important thing to know how to do, knowing how to do it multiple ways demonstrates the depth of their internal toolbox.

Google how you would find out what the default value for backface-visibility is.

Being able to Google something quickly and efficiently is a huge part of any developers job. Are they deft at it? Did they find the right answer? Did they go to a specific trusted source in the results page?

Perhaps phrase the question without “Google” and see which search engine they use. No particular bias here, but if it’s not Google, are they as efficient as you would expect them to be with whatever other search engine that is?

Questions to Ask

Darcy Clarke got the ball rolling with this a few years ago. I’m going to update some of those, and add some of my own, and elaborate a bit.

What is the “Box Model” in CSS? Which CSS properties are a part of it?

The CSS box model is fundamental to understanding layout and sizing and such. It’s made up of:

  • Width and height (or in the absence of that, default values and the content inside)
  • Padding
  • Border

Margin is related but not technically a part of it. I would give extra points for knowing/mentioning that, but not take away and points for including it.

What are Sass, Less, and Stylus? Why do people use them? How does something like Compass relate to Sass?

They are CSS preprocessors. They are an abstraction layer on top of CSS. They are a special syntax/language that compile down into CSS. They make managing CSS easier, with things like variables and mixins to handle vendor prefixes (among other things). They make doing best practices easier, like concatenating and compressing CSS.

Bonus points for knowing how they differ and/or having experience using them. More bonus points for knowing what things like Compass, Bourbon, LESSHat, Nib, etc are and how they relate.

Name some online resources that you reference when having CSS issues.

Being good at googling problems you are having is a valuable job skill. There isn’t any shame in it. There is shame in spinning your wheels because “you should know this.” If you don’t have time to do the Googling exercise above, just asking about resources can be telling.

Google is a pretty good answer (since it’s true and we all know it). But being able to name some specific sites is a good indicator they have done it a bunch and are familiar with the places they land and know their favorites. Stuff like MDN (Mozilla Developer Network) is a good answer.

Describe what a “reset” CSS file does and how it’s useful. Are you familiar with normalize.css? Do you understand how they differ?

Resets are so wildly common in CSS that anyone who is a front end developer type has surely used them. Do they do so blindly or do they know why? The reason is essentially that different browsers have different default styling for elements, and if you don’t deal with that at all, you risk designers looking unnecessarily different in different browsers and possibly more dramatic breaking problems.

Normalize you might call a CSS reset alternative. Instead of wiping out all styles, it delivers a set of reasonable defaults. It doesn’t unset things that are already consistent across browsers and reasonable (e.g. bold headers). In that way it does some less than a reset. It also does some more than a reset in that it handles quirks you may never consider, like HTML5 audio element inconsistencies or line-height inconsistencies when you use sub and sup elements.

What are the various techniques for clearing floats?

Floats are still incredibly common. As this is published, still probably the most cross-browser consistent way to build layout and grids. Anyone who has worked with them is aware of float collapsing. That is, floated element do not add to the height of a parent element. So for example if a parent element contained only floated elements, it would collapse to zero height. You can deal with that like:

  • Use a clearfix (bonus points for micro clearfix).
  • Float the parent as well.
  • Use an overflow property other than “visible” on the parent (bonus points for listing downsides like cutting off shadows).

Bonus points for “create a new block formatting context“. Possibly negative points for something like <br style="clear: both;">

Do they understand directional clearing?

As a bonus question, you could ask them to compare using inline-block and floats for building a grid. Good answer: there are problems either way. With inline-block you need to deal with the whitespace issue. With floats you need to deal with clearing.

What are sprites and why would use them? How do you go about creating them? What are possible alternatives to sprites?

Sprites are essentially multiple images combined into one. Performance is the reason that they are used. Generally speaking, the slowest thing a website can do is request a resource. The fewer requests a site needs to make, the faster it is. Fast = good. Combining what would be many requests into one = good.

Asking how they make sprites would just seal the deal that they are actually very familiar with them. Manually creating sprites is certainly a possibility but it isn’t very efficent. There are helper tools like SpriteCow and SpriteMe, Spriting with Compass, or Grunticon. It’s always interesting to hear a real workflow approach.

Sprites are raster images. When asking about alternatives, good answers might be related to the fact that sprites are often for icons and icons often don’t need to be raster. SVG Stacks, Icon Fonts, Unicode

What are some accessibility concerns that come up in CSS?

Hidden content is a big one here. It’s only acceptable to use display: none; if you’re both trying to hide things visually and the content itself.

CSS controls colors so color accessibility is relevant. Focus styles are also important and directly controlled by CSS.

There is a lot more accessibility stuff that is related to HTML and JavaScript, so mentioning that stuff is great, but I think it’s interesting to target the question solely on CSS to force focused thinking.

What is the difference between inline, inline-block, and block?

Bonus points for bringing up specific details like the fact that you can’t transform inline elements.

What tools do you use for cross-browser testing?

They should have some kind of strategy. Perhaps a web-based tool like BrowserStack. Perhaps a VM based tool like Virtual Box. Perhaps different actual computers.

Part of the job of front end design is making sure things work everywhere they can (based on decided-upon support). You don’t have to love it, but you can’t hate it. “This right here, this is the job. What kind of work were you expecting?”

What are some of your favorite web design workflow tools?

What code editor to they like? Where do they go for inspiration? What experience with version control do they have? What was QA like where they have worked? Support? What different deployment methods have they worked with? Do they know Photoshop or another visual design software alternative? Are the comfortable with the terminal?

Those are just some examples, it’s interesting to hear about any software they use to get the jobs done. Getting a sense of the tools they use (and better, the tools they like) is interesting. Bonus points: a sense of excitement about some of the tools.

Say you found a rendering problem on one of your sites in Internet Explorer 8, which you have decided you are supporting. How would you approach fixing it?

This would be an alternative question to asking generally about cross browser testing. More specific. Perhaps a more difficult alternative question would be to replace IE 8 with something like “A Google Nexus running Android 2.3.” Would they find a simulator? Would they seek out a design lab? Would they ask the company for an allowance for devices for testing, with some kind of smart plan? Would they find a friend with one?

What is responsive design all about?

It’s about making websites work wherever the web is. Different devices with different sizes and different capabilities. Responsive design is about taking one code base and making it work for all of them. Part of that is media queries and different visuals. Part of that is different resources (e.g. different JavaScript to handle touch vs click or different images to accommodate the screen).

Have you ever worked with a grid layout? What are your thoughts on that?

Why did they need a grid? How did they build the grid? Was it home grown or did they use a grid tool? Did they like the grid tool? What kind of class names did they use? Did they go mobile-first or desktop-first? Was a help or a hinderance? Do they reach for the grid automatically on any project?

What are the benefits of SVG?

SVG is an image format that is vector based. It’s an efficient format for that (small file sizes). You can scale them and they retain their sharpness at any size (bonus points for mentioning raster might have the upper hand at tiny sizes). You can affect parts of them with CSS and JavaScript as well as SVG specific filters that can do things like blurring.

Have you ever created a print stylesheet for a website?

Kind of indicative that they’ve “gone the extra mile” with websites before. What approach did they take? How did they test it?

Say you were tasked with coding a design that used non-standard web fonts, how would you go about it?

A non-leading way to get them to talk about @font-face and how it works. Talking about how it works as a core CSS technology is great, as well as talking about services that provide the fonts and can make it easier e.g. Google Fonts, Typekit, Font Deck, Cloud Typography, etc.

Bonus points for obscure knowledge like the history of @font-face syntax or Firefox’s issue with cross-origin fonts.

Explain to me what’s going on in this CSS selector:

[role=navigation] > ul a:not([href^=mailto]) {

}

This selects anchor links that are not email links that are decedents of an unordered list that is the direct child of any element with a role attribute of ‘navigation’.

Being able to verbalize a selector is proof you understand them and evidence they can communicate complex tech subjects.

Your Ideas

What kind of questions have you been asked when interviewing for a CSS-related job? Or that you ask your candidates? Or that you think would be good questions in general?