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

Feedback or Comments?

← Home

Want to learn more?

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