CODEWITHSUNDEEP
htmlcsssass
nepuvut
nepuvut

Reputation: 3

How to nest styles deeply?

If I have structure:

<div class="container">
  <div class="row">
    <div class="col-md-8 first">
       <h2>List</h2>
    </div>
    <div class="col-md-4 second">
       <h3>Examples</h3>
    </div>
  </div>
</div>

I would like to add background-color to .row and font color to h2, so I should do in SASS:

.container {
   .row {
       background-color: red;
       .first {
           h2 {
              color: green;
           }
       }
   }
}

or:

.container {
   .row {
       background-color: red;
   }
   h2 {
       color: green;
   }
}

?

I do not know much about CSS and SASS but I would like to do it correctly.

Upvotes: 0

Views: 44

Answers (2)

Quentin
Quentin

Reputation: 3289

There is no perfect method.
However, I would suggest you to use nested rules only for those following cases:

  • Modifiers
  • States
  • Parent selectors
  • Medias

1. Modifiers

.btn {
  // some syle

  &--red {
    color: red;
  }
}


2. States

.card {
  // some syle

  &:hover {
    border: solid 1px #222;
  }

  &.is-active {
    // some style
  }
}


3. Parent selectors

.primary-nav {
  // some syle

  .header & {
    height: 100%;
  }
}


4. Medias

.video-cover {
  // some syle

  @media screen and (max-width: 1024px) {
    display: none;
  }
}

Upvotes: 1

yaakov
yaakov

Reputation: 4655

Either way works. I'd recommend the first way, because if you have a different .container that also happens to contain an h2, which isn't the one you want, it will target that as well.

If you aren't too concerned about specificity... I'd still recommend the first way, simply because it's easier to understand what's what. If you are going to come back to it later, it's a lot easier if you know what everything is.

It might seem like a lot more typing, but any good code editor (Sublime Text, Atom, VS Code) should have autocomplete functions and other such tools to make it easier.

Just one more, thing, because you're new: StackOverflow isn't really the place for asking questions about the correct way to write code. This question would be better off on Code Review. StackOverflow is more for when you have problems with code that doesn't work right.

Good luck!

Upvotes: 0

Related Questions