DEV Community

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...

Read full post

jmc • Jun 29 '19 • 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.

jmc • Jun 29 '19 • 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.