5 CSS interview questions one should know [part 2]

Neha Sharma - Jan 25 '20 - - Dev Community
  1. Explain 'Box model'?
    Answer: Box-model is about how padding and border affect the width and height of the elements. If there is a div of 200px width and padding 10px then as per box-model padding will get add to the width (200 + 10 + 10 = 220px). Either developer can adjust the width in the CSS by deducting the padding from the width eg: 200 - 20 (10px left and right padding) 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.
    Here interviewer wants to see do you know do you know the impact of padding, border and the solution of this.

  2. Why mobile-first and how you will achieve that?
    Answer: mobile-first is the concept of developing responsive web apps. Mobile-first means writing the CSS targeting the mobile without using media-queries. To write style for the devices besides mobile one should add media-query.
    Here interviewer wants to see do you know how to start with responsive website development, breakpoints, and strategy too.

  3. What you think about {outline: none}?
    Answer: This is one of the biggest evil things a developer can do for the website. We should never do outline:none it is very important for accessibility and focus. Hence, if I see this line my reaction would be the developer doesn't care about accessibility at all.
    Here interviewer wants to see do you know accessibility and do you care about it?.

  4. What is pseudo:elements and classes?
    Answer: pseudo-elements are the way to style a specific parts of the elements. Such as ::first-letter, ::first-line , ::after, ::before etc.
    pseudo-classes is used to define a special state of an element. eg: :hover, :focus, :active ,etc.
    As per CSS3 :: and : is used to distinguish between pseudo-elements and pseudo-class.

  5. Which are the new CSS3 properties that excite you?
    Answer: This question's answer will vary from developer to developer. For me, it would be:

  • border-radius before border-radius to have rounded corners was very challenging and tricky too. This used to block the creativity of the designers and for developers implementing rounded corners was performance-intensive tasks but thanks to border-radius property.Now, it is very easy to have rounded corners. It gives more power not just to devs but designers too.

  • CSS Grids This is a new, improved, and powerful way of creating web layouts. Devs badly needed this to stop putting hacks and have something from CSS itself.

  • currentColor This is my favorite from the point of maintenance and writing less code. By using currentColor you can just tell the properties to use the color already define in that CSS code block. Now, I have to write 1 less color value as well as when the changes will come I have to change only in one place.

Here interviewer is interested in knowing do you know CSS3 new properties and what you think about properties.So, think about that what excites you in the CSS and why.

Happy Learning!!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .