Last year at Codemash I attended Julie Cameron's talk, "Decoupling the Front-End Through Modular CSS." The talk was excellent and Julie shared a lot of insights.
“No one knows what they are doing with CSS,” Julie pointed out right away.
She makes a lot of sense. For instance, the production code of Facebook’s login page shows eight CSS style sheets, thousands of lines long, and full of server-computed nonsense. Is this really what CSS is all about? Nonsense generated by some logic? I don't think so; CSS can be beautiful and be semantic.
Julie begins the talk and shows issues of what we are doing wrong by stating:
- A top down approach to writing styles often leads to repetition
- Selector misuse often leads to specificity trouble.
- Bloat + bad selectors = bad performance
CSS as a modular concept is not a new language, it’s not a new pre-processor, and it’s really not something your favorite text editor will help you with. It’s simply a workflow, which you the developer will follow. It’s not ground breaking nor revolutionary but it provides predictability, scalability, and organized CSS code.
Julie explained that there are a few CSS modular solutions that include, OOCSS (CSS for grown ups), BEM (CCSS), SMACSS (Dry CSS) and Atomic Design (etc).
OOCSS is a scalable, maintainable, semantic, and predictable approach to writing CSS. Nicole Sullivan created OOCSS while working for Facebook. She created reusable modules, which she called the, “media object” that saved hundreds of lines of code. This module is a content block containing a fixed size media element like a picture or video with other variable sized content, such as text. The Facebook status box is the perfect example of this in use.
source: Julie Cameron via Slideshare (slide 47)
Modular CSS is taking common items and adding variations like a CSS selection for buttons.
source: Julie Cameron via Slideshare (slide 57)
This approach is used with the Bootstrap framework with .btn .btn-primary.
source: The Bootstrap Framework
You can easily change the state of the button by changing the second part of the selector: -default, -primary, -success and so on.
Julie shows that this can be used on all modules and components on a site.
source: Julie Cameron via Slideshare (slide 62)
As far as using underscores, camel case, periods or double dashes, it’s really up to you, as long as you are consistent with your selectors.
The other modular CSS solutions, BEM (CCSS), SMACSS (Dry CSS) and Atomic Design (etc) are all based on similar principals. Some of these solutions allow for dry HTML or Dry CSS, which means more selectors (using a lot of presentational classes) will make for dry CSS, and using fewer semantic classes will create dryer HTML.
Julie explained that she personally likes to use a hybrid system.
source: Julie Cameron via Slideshare (slide 82)
Although there is so much more with the other solutions, which go much more in depth than this article, you can find out more on each of them on the web:
In closing, Julie urges you to remember to:
- Organize, optimize, repeat
- Iterate on abstraction
- Find the right granularity
- Establish your conventions
- Document everything
- Architect a style guide
- Utilize a CSS Preprocessor (Sass, LESS, or etc)
- And learn as much as you can