How to organize your CSS with OOCSS, BEM & SMACSS

When any developer has a new project, one of the first thoughts that crossed our minds is how to organize our CSS, keeping in mind concepts like scalability, maintenance and optimization.

The main problem we faced when dealing with organizing our CSS are the style sheets with too many lines including repeated styles. At first, pre-processors seemed to be the solution to this problem thanks to its mixins, includes, the possibility of using conditionals, etc. But it is simply not enough and we still have some style sheets out of our control, not knowing what will happen if we change one class.

Therefore, in recent years some new methodologies have been emerging to the surface in order to standardize the way to structure our CSS. Some of them are almost 10 years old, but they have aged properly. That is why we can apply them in many of the new development frameworks based on componentization, making our projects more optimal and efficient and at the same time making their maintenance simpler.

Here you have a summary of the most used CSS methodologies: OOCSS, BEM y SMACSS.

OOCSS — Object Oriented CSS

Developed by Nicole Sullivan in 2008, this methodology is based on two basic principles: separation of structure from skin and separation of containers and content. Following this division, Nicole Sullivan defines the CSS ‘object’ as ”(…) a repeating visual pattern, that can be abstracted into an independent snippet of HTML, CSS, and possibly JavaScript. That object can then be reused throughout a site. — Nicole Sullivan, Github (OOCSS)“

Its objectives are the ones that we all look for in our developments, scalability, simple maintenance and optimization.

In contrast to the rest of the methodologies we will see after OOCSS, this one does not establish rules when naming classes, as well as it does not offer suggestions on whether to use IDs and tags or not, at the time of give style. Despite this lack of rules, the principles of this method invite us to deduce how to use these features. That is why, BEM is nowadays considered to be the perfect complement for OOCSS methodology.

BEM: Block — Element — Modifier

Developed by the Russian company Yandex, this is a methodology that seeks for the fast development of simple and long term maintenance projects. The first thing need to know about it is that BEM does not use HTML tags or IDs as selectors, but blocks and elements defined by class selectors. It also recommends not using the class connected to a tag, since this makes the CSS rule stricter and more difficult to overwrite. Even though this last feature would allow nesting, it is not recommend it in order to make code reuse easier.

Having the principles defined, we could go on explaining the three main components in which BEM is based on:

  • The block is the functional and logic independent component of the page. The equivalent to a component in Web Components. The Block class tend to be short and specific, like: .header. Block can be nested inside other blocks.
  • The element or elements are the block parts that only fulfil its function inside their own blocks. The element class is named with the block name followed by two underscores and the element name: .header__logo.
  • The modifier allows creating a block or similar element when it comes to appearance or behaviour. The modifier class consists of the element one, followed by two hyphens and the name of the modifier: .header__logo — active.

This methodology could be applied not only to CSS, but also to any other programming language or framework. Learn more.

SMACSS — Scalable and Modular Architecture for CSS

Developed by Jonathan Snook, the SMACSS method consists on organizing CSS rules and five different categories.:

  • Basic: Default styles. These include tags selectors, although sometimes it could include attributes, pseudo-elements and child and parent selectors. A good equivalent would be the common reset.css or normalize.css.
  • Layout: It divides the content into sections, understanding that in each section the content would be divided into modules. It would the same as using containers or a grid.
  • Module: Those components that can be reused.
  • State: The rules that establish the state of our modules. An example would be the active state of a button. States also include modules states according to where that module is inside the page.
  • Theme: This last category is an optional one. It would allow the more visual aspects of the project, keeping in mind that these aspects could be already included in other categories, but because of the project nature are separated into a different theme to use them properly.

SMACSS does define CSS naming rules:

  • Prefix l- or layout- for layout rules.
  • Prefix module- for modules.
  • Prefix is- for states.

The whole methodology is developed and explained by its author a free book.

From these methodologies, others emerged like Systematic CSS, that has features from the three previous one, or SUIT CSS, the result of BEM methodology, task automation and development with frameworks like React, Angular or Ember.

Which is the best one? There is no simple answer, each developer would choose the appropriate one according to what each project needs or his/her way of work. When it gets to the bottom of the matter, all of them follow the same ‘good practice’ policy.

The important thing is that every one of them looks for the essential in a big project: scalability and good maintenance, and the combination of both, therefore we should not take them as manual books, but instead as tools to improve our code and with it, our projects.