CSS interview questions and correct way to approach them

[TheJSGirl]

I'm facing interviews these days and there are a lot of interview questions over the internet along with the answers. but I want to know;

1. How to approach a CSS question.
2. How the flow of the answer should look like?
3. What you expect out of an interviewee?

if you can guide through your favorite interview questions it will be great.

[Neha]

# 1 How to approach a CSS question. CSS / SCSS is only about styling and position. So, just visualize that. The good part is CSS has only a few tags and you can master them easily as compared to Javascript. A good CSS styling would be :

• Easy to maintain
• Less code
• Less repetitive code
• More reusable code
• The clear understanding of when to use - positions and its drawbacks, when to use padding and margin, what is display inline, inline-block, etc. and what are the new tags in CSS3 and why they are good as compare to the old version

# 2 Flow of the answer: Do not hesitate to ask followup questions from the interviewer. Always remember there are many ways to do the same problem not just in CSS but in every programming language.

• Ask clearly about the scope of the problem - browser supports especially.
• Now, understand how the style is getting implemented by class, id, tags, or pseudo-classes. Why it is important coz every type of style implementation will cause a different type of styling and scope. Eg: Id should be unique in HTML and if the interviewer told you - "3 divs having same IDs.." you know it is wrong. As it is not best practice. Now, if the style is on tags, it means the whole HTML document will have the same style for that tag and so on.
• If common classes are there - remember there should be common styling shared by everyone. If there is no common styling then the common class is not required at all & it is true vice-versa too.
• Now, you know which are common style and which are not. Now, look to optimize the solution. Such as if there are 4 divs and they have border and font-color same but 2 divs have padding different. How you will write the CSS? Optimize solution would be:
• One common class for all 4 divs having a common style. Then one class to override the padding only and will be added on 2 divs with the previous class.

# What you expect out of an interviewee? Should know how to convert a design using HTML + CSS. Know very well about the tags and optimizing the CSS. Few tricks about CSS such as - flex vs grids, positions, doing tasks without using JS and only by CSS as well as also know the disadvantages of writing bad css.

[vijayksingh]

Please go through this Front End Interview Guide Follow this religiously.