Discussion on: Top CSS Interview Questions with detailed answers.✌️🤩✌️ Part I

[jmc]

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.