Why you shouldn't use SASS parent suffixes and what to do instead.

Constructing class names seems like useful DRY optimization. You don't have to type so much. What is wrong with it?

Take a look at the example from Sass—Parent Selector—Adding Suffixes that I simplified a bit.

.accordion {
max-width: 600px;

&__copy {
display: none;

&--open {
display: block;
}
}
}

The css we will get is:

.accordion {
max-width: 600px;
}
.accordion__copy {
display: none;
}
.accordion__copy--open {
display: block;
}

What is wrong with it? On the first look nothing. It just saved you typing 18 characters of accordion. Problems will show up later.

The problem with CSS is that it's not useful by itself. You have to apply it to the document, and because we're using classes, add them to HTML.

<div class="accordion_copy--open">some text</div>

Change #

Now add six months to this code, or imagine you didn't write it, and you've just joined the team. There is a problem with the page. Our open accordion has pretty low contrast, and our CEO got a complaint from his grandfather. Time for a quick fix under pressure.

  1. Open your browser inspector to find the element that needs to change.
  2. Read the class name, and it is using accordion_copy--open.
  3. Open your editor and look for accordion_copy--open.
  4. No Results. Scratch your head and try thinking of some excuse to the CEO standing next to you.

"Code is read many more times than it is written."
— Dave Cheney

By focusing too much on optimization, you set yourself and every future developer on the project for a hard time. You will have a much harder time finding things and making changes as you can't just find something. You have to be familiar with every class and part of the project, and I can assure you that in every big project, you will get a mix of patterns. Some files will use parent selector suffixes, but some won't. You will have to guess or needlessly remember it.

Of course, you will hear fans say "Just remove things from the end until you find the concrete thing," which sometimes works, but it's not always true.

  1. CSS can be living in a different repository.
  2. CSS can be coming from a shared or external library.
  3. CSS can be constructed by Interpolation to make it even harder to find.

So how the code should be written from the start? Just like the resulting CSS:

.accordion {
max-width: 600px;
}
.accordion__copy {
display: none;
}
.accordion__copy--open {
display: block;
}

"Everyone knows that debugging is twice as hard as writing a program in the first place. So if you're as clever as you can be when you write it, how will you ever debug it?"
— Brian Kernighan



Share on Hacker News
Share on LinkedIn


← Home


Want to learn more?

Sign up to get a digest of my articles and interesting links via email every month.

* indicates required

Please select all the ways you would like to hear from Krzysztof Kula:

You can unsubscribe at any time by clicking the link in the footer of my emails.

I use Mailchimp as a marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing. Learn more about Mailchimp's privacy practices here.