This article is translated and this is the address of the original.

1. What is a “box model”?

The box-model is about how the padding and border affect the width and height of an element. If the width of the div is 200px, the padding is 10px. According to the box model, the true width of the div will be (200 +10 +10 = 220px) (200 content width +10 left inner margin +10 right inner margin). Developers can adjust the width in the CSS by subtracting the padding from the real width, for example, 200-10-10, or we can use box-sizing: border-box. This will adjust the width itself, and the developer doesn’t need to do anything in the code.

The interviewer wants to see if you know the effect of padding and border and the solution to that effect.

2. Why do you want mobile-first and how will you achieve it?

Mobile-first is the concept of developing responsive Web applications. Mobile-first refers to writing CSS for mobile devices instead of using media queries. To style for devices other than mobile devices, add media queries. (Traditional PC website development is the opposite)

The interviewer wants to see if you know how to get started with responsive web site development, breakpoints, and strategy.

{outline: none}

This is one of the biggest bad things a developer can do for a website, and it should not be promoted. This is very important for accessibility and focus. So if I look at this line of code, my reaction is that developers don’t care about accessibility.

The interviewer wants to see if you know about accessibility and do you care about it?

4. What are pseudo-elements and pseudo-classes?

A pseudo-element is a way of styling a specific part of an element. For example ::first-letter, :: first-line, :: after, :: before, etc. Pseudo classes are used to define a particular state of an element. For example :hover, :focus, :active, etc. According to the CSS3 specification, :: and: are used to distinguish pseudo-elements from pseudo-classes.

5. What new CSS3 properties interest you?

The answer to this question varies from developer to developer. For me, the answer is:

  • border-radius: where there isborder-radiusPreviously, achieving rounded corners was very challenging and tricky. This used to hinder the creativity of designers. Implementing rounded corners is a performance-intensive task for developers, but becauseborder-radiusProperty, now very easy to implement rounded corners. It provides more functionality not only for developers, but also for designers.
  • CSS Grids: This is a new, improved and powerful way to create web layouts. Developers desperately need this feature to stop hackers and get something out of CSS itself.
  • currentColor: From a maintenance and less code point of view, this is my favorite. Through the use ofcurrentColor, you can tell the property to use the colors already defined in the CSS block. Now, I will write one less color value, and when I want to make a color change, I only need to make the change in one place.

The interviewer wants to know if you are aware of the new properties of CSS3 and what you think of them. So think about what excites you about CSS and why.