A clean and arranged CSS structure is hard to maintain in growing projects. Therefore it is important to think about how you would like to structure your classes right from the start so that you don’t lose control. But if you start searching for methodologies and techniques to organize your CSS, you will soon realize that there are many ways to reach your goal! By Anne Debora Zimmermann.
The universe of CSS methodologies is big and grows from time to time, although the list of the most popular ones seems not to change:
- Object-Oriented CSS (OOCSS) by Nicole Sullivan, introduced 2009
- Block, Element, Modifier (BEM) by the developer team at Yandex 2005, open source since 2010
- Atomic CSS by Thierry Koblenz, introduced 2013
- Multilayer CSS (MCSS) by Robert Haritonov, introduced 2014
- SUIT CSS by Nicolas Gallagher, introduced 2014
- Attribute Modules for CSS (AMCSS) by Glen Maddern & Ben Schwarz, introduced 2014
- Scalable and Modular Architecture for CSS (SMACSS) by Jonathan Snook, introduced 2015
You’ve probably already heard of BEM, after all, it’s the most known one and maybe even a kind of superstar among the CSS methodologies. The creation of BEM was started by a developer team at Yandex in 2005 and it became open source in 2010. Companies that are using BEM are e.g. Google, BBC, and BuzzFeed. SUIT CSS is another methodology with many similarities and was developed by Nicolas Gallagher in 2014. Companies that are using it are e.g. Twitter, BBC Three, and LevelEleven.
// SUIT CSS
// LESS nesting
.u-fullSize {}
.AuthorCard {
&-image {
&.is-empty {}
}
&-description {}
&-name {}
}
Both methodologies include component-based thinking to achieve reusable, clean code for faster development and code sharing in a scalable team. And both provide a clean structure of semantically meaningful class names to express how a component is structured and if there are presentation modifications. Although the spelling is different, there is a best practice that runs like a red thread through both: Instead of deep nesting, try to build new components. This also includes to focus on writing CSS classes in form of flat nesting. Excellent read!
[Read More]