DEV Community

Cover image for Top CSS Interview Questions with detailed answers.✌️🀩✌️ Part I

Top CSS Interview Questions with detailed answers.✌️🀩✌️ Part I

Theofanis Despoudis on June 28, 2019

Read the original article in CodeThat.today CSS tends to produce excessive headaches among developers, and we don't blame them. Working with CSS c...
Collapse
 
johncip profile image
jmc • Edited

For A19, I'd use SMACSS :P

.navList {
  list-style: none;
  padding-left: 0;
}

.navList--item {
  display: inline-block;
}

.navList--link {
  color: white;
  background-color: green;
  padding: 5px;
  text-decoration: none;
}

.navList--link-featured {
  background-color: orange;
}
<nav>
  <ul class="navList">
    <li class="navList--item">
      <a href="#" class="navList--link">toys</a>
    </li>
    <li class="navList--item">
      <a href="#" class="navList--link navList--link-featured">treats</a>
    </li>
  </ul>
</nav>

Not as concise, but:

  • styles are independent of the DOM
  • the concept of a "nav list" is explicit
  • the relationship between the nav list and its children is explicit
  • the "variant" nature of featured links is explicit

Removed the margin-top as letting the parent handle it means .navList can be reusable.

I love SMACSS. Knowing the specificity rules is good, but not needing to is even better.

Collapse
 
johncip profile image
jmc • Edited

This is pretty cool, thanks.

I think the explanation of A6 is wrong, if I understand your meaning:

if we apply a featured class on a link we lose all the rules from the nav element

Not all of them -- only the properties which appear in both blocks will be overridden. For the example you gave, the link will have text-decoration: none and color: white. You only "lose" the background-color: green entry.

For Q26, you may want to specify that the container isn't flex, etc.

Collapse
 
theodesp profile image
Theofanis Despoudis

Thank you I will fix.

Collapse
 
halans profile image
Jean-Jacques Halans

A1: unvisited? That may be the state, but that’s not a CSS value as far as I know, :link is (for an unvisited link element).
The old LoVe, HAte!

Collapse
 
alohci profile image
Nicholas Stimpson

A14 is incorrect. !important has nothing to do with specificity. It's part of the wider cascade.

Collapse
 
theodesp profile image
Theofanis Despoudis

I will probably have to rephrase it as can we override inline styles that marked as !important? Thanx

Collapse
 
johndhpark profile image
John Park • Edited

For Q32, I think you meant to say box-sizing: border-box instead of box-sizing:content-box.

Collapse
 
theodesp profile image
Theofanis Despoudis

Good catch. Thank you

Collapse
 
alvaromontoro profile image
Alvaro Montoro

I would have expected a little more flex and grid. Looking forward for the second part.

Collapse
 
theodesp profile image
Theofanis Despoudis

Yes in the next part which is WIP

Collapse
 
johndhpark profile image
John Park

Thank you for such helpful resource.