Crack Interview With Tricky CSS Questions in 2021

CSS saves a lot of work. It can control the layout of multiple web pages all at once but, CSS is a more dangerous style sheet language which seems to easy sometime but sometime become very difficult to maintain style sheet.

Let explore few CSS Trick which seems to easy but difficult to solve.

1. Remove white space between two inline-block elements?

Trick 1: You can make element inline or make in one line. This will remove the extra white space from elements.

Trick 1

Trick 2 : By removing the font-size of parent element. Like you can bind all element to one of the parent element. So, with this you can make the parent element has font:size:0 and make sure to add font-size:anything of the child element to make visible of the element.

Trick 2 inline-block

2. How to manage x-index in an App ?

Let see in above image, you can see the div #2 have lower stacking order and

DIV #6 is the highest stacking order in the z-index scale.

Trick 1: You CSS to manage the stacking, but don’t do hard code of index number, this will lead you to infinity number like.

In this image all z-index number is hard code, now suppose I have to add new element with z-index that it become hard to give a number, so mostly developer gives a random number like-

.menu{
  z-index:1000000000000000
}

So, for this you can use SASS to maintain the z-index ratio, which will help you to maintain the number.

SASS z-index

Just in case you want any other z-index then add-

$zMain:45

and use it anywhere in whole app.

3. How do you plan Accessibility ?

Developer mostly leave this one because what is use of having an accessibility, but this is the most interesting question in interview. Interviewer asks this because he wanted to test your CSS knowledge. But now a day this is very important to add this one.

Accessibility

Trick 1: Accessibility is nothing to make website for disability people. So, there is no correct and wrong answer of this question. The First thing of accessibility is taken by the product owner, they're going to come with the idea to let implement this feature. Some Accessibility are -

• Keyboard navigation
• Text alternative for image/icon (Alt tag)
• Sufficient contrast
• Size of the element and space between element
• Readable font sizes

4. Use Case of using !important ?

Trick 1 : The answer is avoid using the !important, A Lot of people use this to override the CSS of particular element, because they don't know the specificity of that element and this come to result of overwriting the CSS.

5. Why would you use the following syntax ?

Syntax

The question can be answered in the above problem of specificity.

Trick 1: In the below image you can see the element with two class and both class is giving it's our CSS and the output element is in green color because the specificity thing CSS read style sheet from top to bottom and left to right. So specificity of second class is more than the first one.

CSS specificity

So, we can also increase the specificity of first one by make CSS by -

.el.el{
    color:blue;
    font-size:14px
}

6. Increased specificity of class over id ?

We all know that id has more priority than class, but today we will figure out how to change the specificity of class more over id.

Trick 1: instead of using the #id , we can answer this question by using id like this -

[id=”myId”]{
color:green
}

For clear idea check solution in below image, so by dong this we lower the specificity of id over class.

So, these are the few questions that mostly asked in an interview, but it depends on what kind of interview you're giving, because these are a kind of advance interview question.

Knowing these trick will help you in interview as well in daily development also.

Happy coding, and thanks for reading.