CSS Interview Questions Feedback

These past couple of weeks, we have been interviewing candidates for a front-end position, and -among other things- I was the person asking about styling and CSS.

So I came up with a tongue-in-cheek snippet of the CSS joke with the text "CSS is Awesome" overflowing a box:

The idea was to have some open questions that could be answered in a few minutes (no more than 15), and that could have different solutions to trigger a conversation and see the candidate's thought-process.

Some of the questions would be:

• How would you avoid the text overflow?
• How would you center the box on the screen?
• Could you have different colors for each line of text?
• What does box-sizing: border-box do?
• Do you know what the vmin unit represents?

So for example, if the candidate avoided the text overflow by making the box wider or changing the font size, I could add the restriction that the width and the font had to be fixed, so an alternative had to be found.

Or to the question about centering the box on the screen -one of the most popular CSS questions in StackOverflow-, if they used positioning, I could ask for a solution using FlexBox or similar.

They could change HTML and CSS, but not add JavaScript. Again, the idea was to see how they thought more than the solution in itself (there are many ways of solving each of them).

With this test, I tried to cover some major CSS features: positioning, FlexBox/Grid, transformations, box model, text properties, and some units.

---

This was the first time that I actually came up with an exercise like this (in the past I just asked generic questions), and since then, I decided to move to something more "practical": develop a small component and style it, which combines is not so specific to CSS but it allows testing multiple disciplines.

The thing is that I don't know how complex my original test could be considered... and that's why I come to you (thanks in advance for your help).

If you got the questions above:

• Would you think it is too easy or too complicated?
• Is it missing important things? (e.g. not much room for pseudo-elements)
• What would you add/remove to improve it?

Comments

[Nicholas Stimpson]

Definitely the right approach, in my opinion. I'd much rather have a conversation about the options for solving a problem, than asking for a single solution. But you need to be balanced, rather than fishing for a particular solution. So if the candidate first offered a flexbox solution for the centring, I'd ask about a non flexbox/grid solution. Similarly, you might get a better conversation if, rather than asking "what does box-sizing: border-box do?", you ask "how could the box have been sized the same, using box-sizing: content-box?"

Have you missed important things? For sure, there's more to CSS than you can realistically ask in a interview. For example, I might want to know about their awareness of CSS's impact on accessibility issues, like content ordering, focus-ring hiding, colour-contrast etc.

[Vuild]

Seems fairly straightforward. Doesn't challenge.

Possibly needs:

• Colors (hex vs rgba vs HSL).
• Animation (usage/best practice).
• Media queries.
• Mistakes.
• Something creative (there is no creativity in the questions).
• Performance (gradients, rendering, requests).
• Accessibility (is mostly HTML, but there are some things that could be included).

Doing unpaid tests for future jobs is annoying too.

[Daniel Schulz]

Nice! The colored lines task is great, because you can go really wild with the implementation on that.

I think I'd add something about code structure. A big part of writing maintainable css is organizing it. How would you scope your styles, how does selector depth work, maybe inquire about BEM and co.

As a more advanced question, I'd also ask about the render pipeline. An exmaple would be animating an element while avoiding reflows.

[Temani Afif]

I would add a question around block, inline-block and float. Those concepts will allow you to judge the level of the candidate. If when talking about float, the candidate will mention clearing float then it's a good point for him (if clearing is something strange to him then he's a beginner). Same for inline-block and the whitespace issue. It's also important to see how he will compare all of them. A CSS wizard will talk about BFC, IFC and anonymous boxes while a beginner will talk about next to each other and below each other.

You can also ask: "give me 5 properties that result in a creation of a containing block for position:fixed elements ?" 😜 if he gives you one then you should definitely hire him 😉

[Wilfred]

It's a really good exercise. Not hard at all.

A possible addition:
What unit would one use for font-size and why?

[Andrei Gatej]

IMO, it is recommend to use ‘rem’ and that’s because the value will depend on the root element’s font.
With that in mind , you can easily achieve text responsiveness just by changing the font size of the html element on different screens.
I’m also aware of a trick, that I’ve never used though and so I’m not 100% sure of what benefits it brings: use font-size: 62.5% on html element so you can make sure your text is still responsive even if the user’s browser has set a custom font size. I might be wrong on this use-case, so please correct me if I’m wrong!

[Vuild]

Correct.
rem and em are generally the way forward.

62.5% used to be to set everything to a base size, not relevant anymore really. It pre-dates responsive design.

[Wilfred]

thanks, I will give 'rem' a try.