How I write CSS.

I follow the rule of only having one parent.

  1. It’s just enough hierarchical information to tell me where an element should be used. But it doesn’t create a large and fragile hierarchy. (And all hierarchies become fragile once the code is in maintenance mode.)
  2. It’s easy to create a base style for an element, while still being able to modify slightly it for specific places.
  3. It does the above two while minimizing the number of classes needed on a particular element. For simple websites, an element should only need one, damn class.

My goal in One Parent CSS is not just to create good CSS, but to avoid a few patterns in I hate.

  • Trying to eliminate all parents results in styles like page-footer-p-author and article-footer-p-author. Those two declarations will have a lot in common, which means a lot of duplicate code. Or extremely funky CSS declarations. Or requiring a preprocessor…
  • Preprocessors should not be required. Like an IDE, they are useful but shouldn’t be necessary for good design. I spent a long time doing maintenance in substandard environments, and my biggest takeaway from that experience is that everything should be doable from vi, and the flat files should be readable.

But is it good programming?⌗

I think it is!

This method is supported by good programming principles. Having large hierarchies of parent elements increases the amount of tight coupling in the CSS file. When every element is so tightly wound up in a specific hierarchical order, it’s difficult to easily reuse those basic elements.