Simple Naming for Modular CSS Class Names
A follow up to some discussions over in The Sass Way blog and guidelines for my clients.
There are three basic rules to keeping it simple:
- Lower case letters
- Dash case
- Meaningful, natural names
(In other words: No prefixes, no under_scores, no camelCase)
Don’t do it. There is no cascading. CSS is much more maintainable if you avoid cascading altogether and use just class names. The same goes for #ids and HTML elements. Don’t style them.
Everything is packed into a module. A module follows the naming conventions (see above). All elements that belong to this module are connected with two dashes (
--). I chose two dashes as they stand out, like there’s some meaning behind it. And that’s exactly what it is. Some people use a mix of underscores and dashes to separate modules to sub elements, but for me this looks a bit random if you are looking at the code without knowing the rules.
.teaser background: yellow border: 1px gray solid padding: 10px .teaser--title font-size: 1.5em font-weight: bold .teaser--text font-size: 1.1em
This code will be in a file named modules/_teaser.sass. Each module should be completely independent from another. A module could also be nested inside another module, as long as it makes sense.
Modifiers should be applied to the module class only and named in a way to identify it as a modifier (starting with a
.teaser background: yellow border: 1px gray solid padding: 10px &.-important border-color: red .teaser--title font-size: 1.5em font-weight: bold .teaser.-important & font-size: 2em .teaser--text font-size: 1.1em
The layout is just another module (
.layout--logo, …). No extra rules needed.
And yes, I don’t style
body for consistency :)
I don’t want to have too many rules; just a very easy to learn and easy to adopt concept which looks similar in each file. I’ve done it in many projects for clients with different frontend developers and it works well. As a side effect, just using class names speeds up rendering in the Browser.