Classititus

March 31, 2015

Since I started writing BEM I’ve often wondered if I’m going overboard with the amount of classes I’m using. I avoid nesting where possible, and I would always add a class to a <li> rather than writing a descendant selector in my CSS.

<ul class="navigation">
  <li class="navigation__li">Item</li>
</ul>

// I NEVER do this
.navigation li { colour: blue;}

// I do this
.navigation__li { colour: blue;}

I always try to keep my CSS one level deep, using descendant selectors when I specifically need to overwrite something. My opinions have changed slightly, but you can read more about the structure of my CSS when writing BEM here.

Yesterday I was working on a side project and I was being a little bit lazy nesting <a> tags in my SASS, meaning that they were descendant selectors. Have a look at the following code.

<ul class="navigation">
  <li><a>Item</a></li>
  <li><a>Item</a></li>
  <li><a class="navigation__different">Item</a></li>
</ul>

// SASS
.navigation {
  a {
    color: red;
    display: block;
  }
  .different {
    color: blue;
  }
}

// Outputs
.navigation a {color: red;}
.navigation .different {color: blue;}

This immediately caught my attention as I’m nesting not only once, but twice, purely to overwrite the previous rule. I quickly refactored my CSS and told myself to stop being lazy…

<ul class="navigation">
  <li><a class="navigation__a">Item</a></li>
  <li><a class="navigation__a">Item</a></li>
  <li><a class="navigation__a">Item</a></li>
  <li><a class="navigation__a navigation__a--blue">Item</a></li>
</ul>

// SASS
.navigation {
  &__a {
    color: red;
    display: block;
  }
  &--blue {
    color: blue;
  }
}

// Outputs
.navigation__a {color: red; display: block;}
.navigation__a--blue {color: blue;}

By doing this I’m inheriting the element styles then using a modifier class to change the link blue. This makes me happy as none of my SASS is nested. I’m one level deep, nice code I think.

This got me thinking

Although I’m a fan of the that code it really makes me think whether it’s the best choice?
For starters I’m writing an extra 5 classes in my markup so that I can change one link to blue. In the other example I had used only one extra class, but I had two nested SASS rules.
Which one is better/faster/leaner/maintainable/logical?

I cast my mind back to CSS specificity remembering that elements such as <a> scores 1 point, whereas a .class scores 10.

a = 1 point
.navigation__a = 10 points
.class .class = 20 points

// So based on our previous code examples
.navigation a {color: red;} = 11 points
.navigation__a {color: red;} 10 points

So a class is always going to beat a nested selector.

I guess my next question was the difference between having extra classes in my markup and the weight/speed of my CSS. For example which renders faster?

// Code 1
// http://codepen.io/anon/pen/xbeKXo

<ul class="navigation">
  <li><a class="navigation__a">Item</a></li>
  <li><a class="navigation__a">Item</a></li>
  <li><a class="navigation__a">Item</a></li>
  <li><a class="navigation__a navigation__a--blue">Item</a></li>
</ul>

.navigation__a {color: red;}

// Code 2
http://codepen.io/anon/pen/XJQrzO

<ul class="navigation">
  <li><a>Item</a></li>
  <li><a>Item</a></li>
  <li><a>Item</a></li>
  <li><a class="navigation__different">Item</a></li>
</ul>

.navigation .navigation__different {color: red;}

At a guess I would say code 2, as there’s less markup to load, but Code 1 is my preferred method. Considering the performance of browsers these day this is probably never going to make much of a difference speed-wise but there’s nothing wrong with paying attention to it. Don’t forget that these are very small code examples, what about when there are thousands of lines. It’s also important to mention that it’s not all about speed, it’s important that code is easy to read, work with, understand, maintain and scale. BEM is a naming convention that caters for all those things.

I’m unsure what’s the right way of doing things but I figure it’s good that I’m thinking about these things and eager to write the best possible code. I guess it’s safe to say that I’ve got classititus, but in my opinion it’s a good thing for me to have… for the time being!

How do you write your CSS? Do you agree/disagree with anything? You can catch me on twitter

Thanks for reading!

Animal football team