Posted on

Categories this post is in

Next/Prev

I’ve been thinking a lot recently about how I nest my sass, namely during a hover or some kind of active state. I knew the various methods involved but none of them felt “right” to me, I was also unsure which I preferred. Lets look at an example, I’m using BEM naming convention by the way

<div class="boxes active">
  <div class="boxes__box">
    <h2 class="boxes__title">Hello</h2>
  </div>
</div>

I’ve then got some sass like this.

.boxes {
  &__title {
    color: red;
  }
}

Say I needed the boxes__title element to be blue when an active class is applied to the boxes block. There are a couple of ways that it can be done (I discovered a new one at the end of this post). Here’s the first way, making use of the ampersand technique to add a selector to qualify a selector.

.boxes {
  &__title {
    color: red;
    .boxes.active & {
      color: blue;
    }
  }
}

// This outputs
.boxes.active .boxes__title {
    color: blue;
}

That’s great – I’ve used this technique many times – but it always feels wrong to me, writing the class out in that way. The second way still writes the class out like this, it also uses the ampersand again, but it’s structured in a different way.

.boxes {
  &.active {
    .boxes__title {
      color: blue;
    }
  }
  &__title {
    color: red;
  }
}

// The outputs exactly the same
.boxes.active .boxes__title {
    color: blue;
}

While most sass people I asked have preferred the first method, I often use the second one. My reasons for this is that I feel that having all the active properties nested in one place makes more sense than having them scattered about. This would especially apply if you have blocks inside blocks, and the sass is located in multiple files.

While I was writing this post I had the idea of a sass file that includes all the active states/hovers, that way they’re all in one file, easily searchable and it outputs the same anyway. I have no idea if this is right or wrong, e.g should the states be a separate block/elements altogether or too hard to maintain, but something I thought about? Imagine a sass file called active-states.scss that contained this…

.boxes {
  &.active {
    .element__one {
      color: red;
    }
    .element__from-another-block {
      color: green;
    }
  }
}

While I was writing this post I had a few suggestions to use the @at-root directive. This effectively jumps out of where you nest it and you can write what you want. This is nice as you can group things together, but I still get the same “writing-the-class-out-is-wrong” feeling (it’s also the first time I’ve ever wrote it so that feels weird too). It would look like this….

.boxes {
  &__title {
    color: red;
    @at-root .boxes.active .boxes__title {
      color: blue;
    }
  }
}

After writing this post my mate Vin (@bwownbwead) demonstrated a technique he uses with the @at-root directive. This technique allows us to re-use the class from a variable, preventing duplication and messy nesting.

.boxes {
  $selector: &;
  &__title {
    color: red;
    @at-root {
      #{$selector}.active & {
        color: green;
      }
    }
  }
}

Everyone writes code differently and I guess there’s no right or wrong answer here (correct me if I’m wrong please!). I’m still a fan of nesting all the active states in one place, but I know that many others nest them in their element. How do you write yours?

All the examples in here can be found in this codepen.

Worthy of Note

Worthy of Note is a site aimed at Web Designers & Developers. It offers a wide range of resources to help assist anyone in the web industry.

View