DEV Community

Discussion on: The Differences Between CSS, LESS, & SASS

Collapse
thebouv profile image
Anthony Bouvier

I've used SCSS for years and never once in the context of Ruby. I think it is phenomenal and the organizational benefits alone make it worth using.

You definitely have to be careful with its nesting feature though -- it is easy to nest too much and end up with generated CSS that has such high specificity that you make everything more complicated.

Generally I stick to 1 level of nesting, 2 if I really think there's a benefit. But rarely more than that lest I create a monster.

One of the biggest benefits of the organization SCSS allows for is being able to nest media queries together with the elements that query is affecting. Love it.

Collapse
flippedcoding profile image
Milecia Author

Thanks for the comment! It's good to know that the level of nesting (5th level or higher) in that crap project was unusual.

Collapse
kenbellows profile image
Ken Bellows

I'm a big fan of combining BEM with the ampersand operator to let me use nesting in LESS or SASS while maintaining flat CSS selectors:

<section class="user-details">
  <h1 class="user-details__name">Ken Bellows</h1>
  <div class="user-details__employment">
    <h2 class="user-details__employment__employer">
      My Cool Job, LLC
    </h2>
    <span class="user-details__employment__position">
      Web Dev
    </span>
  </div>
</section>

SCSS/LESS:

.user-details {
  padding: 2rem;
  border: 1px solid #ccc;

  &__name {
    font-weight: bold;
    color: #337;
  }
  &__employment {
    font-size: 14px;
    color: #222;

    &__employer {
      font-size: 1.5em;
    }
    &__position {
      color: #555;
    }
  }
}

Output CSS:

.user-details {
  padding: 2rem;
  border: 1px solid #ccc;
}
.user-details__name {
  font-weight: bold;
  color: #337;
}
.user-details__employment {
  font-size: 14px;
  color: #222;
}
.user-details__employment__employer {
  font-size: 1.5em;
}
.user-details__employment__position {
  color: #555;
}
Collapse
thebouv profile image
Anthony Bouvier

I like it. BEM has some issues too in getting hyper-specific and tripping over its own verbosity.

Just like I don't nest more than once or twice in SCSS, you can create a nightmare with BEM once you start getting into grandchild selectors and the like.

Like for your example I probably wouldn't nest employer and position, but instead have them on the first level.

Of course I know your example isn't trying to teach BEM or be a shining example, just a quick example. But for those interested in BEM, definitely keep an eye out for traps:

smashingmagazine.com/2016/06/battl...

Personally I've tried sticking to BEM on a few projects but feel I drift away pretty fast from it. That's my own personal bugaboo and not for any technical reason. I just .. drift. Haha.

Thread Thread
kenbellows profile image
Ken Bellows

Yeah absolutely, I'd flatten it if possible, I was just trying to intentionally demonstrate multiple levels of nesting. But I have also found plenty of real-life cases where I needed to nest values like that for layout and/or semantic reasons. With the advent of CSS Grid it's becoming a lot less necessary to nest for layout's sake, but I still find it can be useful semantically, just to better organize the markup for reading, and in some cases for a11y purposes as well.

I personally haven't had much trouble with even pretty deeply nested BEM, as long as you're careful to refactor commonly repeated styles and component patterns out into reusable utility classes where it makes sense. But of course, as with any technique, you can take BEM too far.