Video guide
12:38 · 29 April 2024
CSS Interview Questions & Answers
Chapters 7 sections
Interview questions in this video:
- 01
1. What is the difference between em and rem?
Both are relative units. em is relative to the parent element's font size; rem — the r is for root — is relative to the html element's font size.
rem gives you predictable sizing regardless of nesting; em compounds through the tree.
Relative unitsResponsive sizing - 02
2. Can you explain the CSS box model?
Every element is a box: content at the center, padding around it, then border, then margin. The content width is either computed from content or set explicitly.
Backgrounds cover content and padding, not margin. Box shadows render outside the border, in the margin's space.
If you master one CSS answer, make it this — it's the most important CSS question in any interview and half the practical questions reduce to it.
Box modelPadding vs margin - 03
3. What is CSS specificity, and how does the browser use it?
When multiple rules target the same element, the browser scores each selector — inline styles beat IDs, IDs beat classes, classes beat tags — and applies the highest score. !important overrides them all.
So a #navbar ID rule wins over a .nav-item class rule on the same element, no matter their order in the file.
SpecificityCascade!important - 04
4. CSS is a global namespace — what problems does that cause at scale?
One team's generic selector silently restyles another team's components. Nobody notices until production.
The classic defenses: BEM naming conventions for scoped, nested class names — or CSS-in-JS, where generated unique class names make specificity conflicts impossible.
BEMCSS-in-JSScoping - 05
5. What is critical CSS?
The subset of CSS needed to render the above-the-fold view. CSS blocks rendering by design, so shipping less of it up front makes the first paint faster.
Extract the critical rules, inline them in the HTML, and load the rest after the initial render — no extra blocking request, no layout shift.
Critical rendering pathAbove the foldCLS - 06
6. How do you manage CSS in a large application?
Three moves. Scope your styles (BEM or CSS-in-JS) so teams can't break each other. Extract styles into cacheable stylesheets served from a CDN — CSS buried in the JS bundle can't be cached separately.
And split design-system CSS from feature CSS: the design system changes rarely, so it can carry a long cache policy while feature styles iterate.
CDN cachingDesign systemStyle extraction
Transcript
We've done over 150 frontend interviews, and these are the most asked CSS questions you should know if you want to pass a frontend interview. In this video, we will also reveal the number one mistake frontend developers make when answering CSS questions. And if you stay until the end, we will also reveal what's the most important CSS interview question and how to answer it properly so you never fail a frontend interview ever again.
First CSS interview question, it's what is the difference between EM and REM? So, they are both relative sizing elements, that means you can use them to to give relative size and they'll be responsive. It's referring to the font size of the parent element. And REM, it's pretty much the same thing, but the R stands probably for root and it's binded to the HTML element. So, it means the font size of the HTML tag in the document, not of the immediate parent.
Awesome. Makes sense. Understood. Now, um we're going to move on with the more practical question. So, can you open up the link on the board, I sent you on Discord board, um, can you open up the link? Okay, give me a sec. And share that really quickly. Yes, awesome. So, um, yeah, let's imagine we have a div element, that's our div element that you see on the screen. And those are kind of the CSS specs.
So, we have a width of 300 pixels. The border it's one pixel. Uh, we have a padding that's 10 px, and then we have a margin of 5 px. Okay? And we set this Mona Lisa image, right, we're going to set that as a background to this element, okay? Mhm. That's the element, we're going to set the background. My question is, how much of the image, okay, how much of the image will be actually visible once we do that? Okay, so the width is 300.
Padding is 10, we have a border and margin of 5. So, if I were to set this as a background, Yes. by default, would probably occupy the content of the box and following the box model also the padding. So I would assume it's going to display like this. So that will be a content and this would be I would say our background following the box model, but of course it would be cut off here depending on how we set it as a background.
Awesome. That is correct. Now, you did mention the box model. Okay, can you explain more? Can you tell me more about the box model? Sure, so it's basically the way that in CSS we manage how content is being displayed and pretty much every element has a uh content box, call it that way, which is I guess what we see here. And so we have the content inside and it can have a width either implicitly calculated by the browser based on the content or explicitly set by us, like in this case.
So that would be an explicit width, and then the content would have to adapt to that, and basically the box model dictates how the padding and margin will behave. The margin um doesn't account for content, it's just kind of outside, and then the um and the inside uh we have the content and then the padding, and in the case of background images, they do occupy the space of padding if there is any padding.
Now, let's think about what if we had a box shadow. You know, where will that box shadow actually display? Uh so whenever you have a box shadow, I think it will just appear over here where the margin is. So depending on how much shadow we add, it will just appear here. This question that Bogdan just answered brings me to the number one mistake front-end developers make when doing CSS interviews. And that is that they get distracted by these questions correctly, just like back then did a few seconds ago.
Which means the most important CSS question you'll ever get in a technical interview will be Can you explain the CSS box model? That's it. Be able to answer that and the rest of the interview will be a piece of cake. Now, once you're familiar with the box model and you want to learn more, a lot of front end developers ask themselves, hey, but how much CSS should I know? Well, it depends on the kind of position you are applying for.
Based on our experience, if you know the box model and the main layout techniques, including flexbox and grid model, you will do just fine. Now, on to the next question. Okay, banner, I did send you a code sample, can you pull that up? And now check it out, we have an index HTML, then we have a style sheet that will apply the styles for that index HTML, pretty basic index HTML. Uh we have a div element there, it has an ID navbar and we have a class that has nav item.
Um and you can see those things are specified also in our style sheet. Now, the question is what it's the color, what what color will the navbar have and can you tell me why? Um so we have the div and we apply the ID and the class and we use the selectors to apply the styles and it's the same style. So I would assume this these two selectors will cascade and following probably the one with the higher specificity will be selected. And in this case, it's probably the ID.
ID has precedence it has a higher uh specificity than uh than the class. So I would assume this would be blue and from what I see the editor it even it's even telling me the specificity. So here I have 010 and here 100. And 10 these are powers of two, so this would be probably a two to the second, so that's a four over a specificity of two to the one, which is a two. So we will probably be uh blue.
Okay, Bogdan, sounds great. Now, how would you go about testing this? So I guess probably the easiest way to test this would be to see if it renders. Let me open this. Okay, so what I see for now is this hello. So it looks like a CSS is not really being picked up. Let me check the code. Okay, so we have the style sheet, but it's not a reference in the HTML. I'm going to Can you show the style sheet right now?
I don't see it. Yes. So what I was saying is just no reference in the HTML to the style sheet. Um, I'm going to add one for the purpose of the test. Uh, I'm assuming you have a style, is it styles.css in just to be Yes. semantically correct, this is a style sheet and let me close tag here. And see, can you see that? Let's see if it works. I'm going to refresh now. Oh, there you go. So I do not see.
Could you share your screen cuz you opened it up in in a different window? Yeah. Okay. Amazing. Looks like it works. So yeah, always check that the CSS stylesheet is actually linked. That's the moral of the story. Okay, we're going to move on with the next question. And now we're going to talk about CSS specificity, right? That's what what the previous question was about apply to as applied to code. So my question is, what is CSS specificity? Okay, if you can give me an example and you know what are the implications of CSS having that kind of specificity and actually CSS being a global language over production level code.
Yeah, sure. So CSS specificity, it's basically needed because we can have different styles applied to the same element and we need to figure out which ones to actually apply when we render that element. So what the browser does is to based on how the rule was applied, whether it was an ID like in that case or a class or just a simple tag. Figure out what is the importance of that rule by calculating the specificity.
basically apply the rule with the highest specificity. The highest specificity you can have it's when you add this important next to a tag and then it will always be applied. So that's how the we also basically figures out if you have multiple rules applied to the same element, which one to apply? Understood, understood. And what what are some implications of this in real-life code base that you work with?
So, one of the difficult things is that you might end up, if you're not careful about your selectors, you might end up modifying the styles on elements that you didn't wanted to by applying, for example, VH&A rules. Or um, yeah, you basically have this conflicts where you you end up changing the styles of a global element by mistake. And uh one of the things I used in the past to avoid this, it's using the BAM language where you start writing very specific nested rules, there's a specific convention with the BM, or you can use CSS in JS, which will basically generate a unique class name and that makes sure that there's no uh specificity issues or conflicts when you render your components in a framework like React, for example.
Yeah, this is implemented by uh style components, right? They generate a unique class, like a hash class name that it's unique, so you don't have any global naming issues, right? Uh, cool. But now we're going to move on to a completely different question, topic, very important for performance, nevertheless. Um, and the question is, what is critical CSS? And can you explain me how critical CSS it's actually used?
Sure. So, critical CSS, it's CSS that we can extract because it's only uh it's the only CSS needed to render the above default portion of a page. So, whenever we render our application, we're talking about what the user sees in the viewport without scrolling. So, the first thing they see, we can actually extract those rules that render that, and ship them differently as critical CSS. cumulative layout shift. So that would allow us to basically render as little CSS as possible in our first render and make the page faster, and then we can load the rest of the CSS after that initial render. Understood. Makes sense. Cool. Now onto the next question, it's more of an architecture CSS architecture question, which is how do you manage CSS in a big scale application? Whenever we have bigger applications, I'm thinking back to my experience, whenever you have several teams, for example, working on the same front and application, we end up having troubles with one team deploying code and destroying the view of another team without even them noticing because again, CSS is this global namespace and you can easily pollute it by adding uh very generic selectors. One of the solutions I already mentioned was uh CSS in JS that was pretty good. But when at least when I remember the first time I implemented CSS in JS, the problem is it was very difficult to cache our styles um because again, CSS in JS would be injected in the JavaScript. So we actually had to change the configuration and even if we have CSS in JS, which we use style components for, extract the styles in a different style sheet and then bundle that and still have the CDN caching on it. So we we still have performance if not a CSS will be shipped with our bundle um and that would be less performant. So that with the number two, I would always use a CDN and I would always try to extract the styles and ship them as in a CDN with the right caching policy, so we can cache them. And the other practice that you could do is to extract, for example, the CSS that your design, if you have a design system, uses and ship that differently from the specific styles that will change a lot. And what that would allow you to do is to have a much longer caching policy on your design system. Uh so unless you change the design system, the users doesn't have to download this huge CSS file from the design system, they only need to download maybe the small style sheet that comes from your components. Okay, folks, three things
want to do now. First of all, if you have any technical interview questions that you want Bogden I to answer, you know all of these videos, then grab them in the comments. Second, if you want to find out what your technical gaps are for you to get to that next level as a senior engineer, then check out the free technical assessment we put together for you. And third, it is proven that developers who have a mentor are almost five times more likely to get promoted and earn more.
If you want Bogden I to personally mentor and coach you so you become a confident, competent senior developer, then you can book a chat with me and see if we could be a fit. As for us, we will see you in the next one.