SMACSS and BEM – Tools for CSS optimization

CSS, the formatting language, is easy to learn on the one hand, but difficult to structure on the other hand and thus makes it difficult for developers to keep track, especially with large-scale projects. In this case, SMACSS and BEM can help: They offer ways to enable a structuring of CSS code.

SMACSS: Everything in order

SMACSS (Scalable and Modular Architecture for CSS) brings order to every CSS monstrosity: It can be understood like a style guide. Individual recurring elements such as charts, buttons, or forms are separated from the basic style, e. g. background, layout, type or page type, and get their own files. This leads to a modular style structure.

The advantages are obvious: You can find your way around a CSS quickly thanks to SMACSS. It makes the code easier to detect and read. This is, for instance, ideal for developers who join a new project and have to familiarize themselves with it. With the clear folder structure it is apparent right away where new styles have to be added. That is why this method works particularly well for large-scale projects.

Quick example: Change of color values
Color values are saved in variables and are transferred to different files by referencing. To implement a color adjustment for all files, you simply have to change the color value within the variable. In order for the name on file with the variable to reflect the correct content, it has to be adjusted in all files. Only by doing so the color adjustment will be traceable later on.

BEM: A class of their own

BEM means „Block Element Modifier“ and describes the three units (classes), into which this method classifies a CSS code. A block is an independent part of a user interface such as a menu, a contact form or a button. A block is reusable in different contexts and can contain additional blocks or elements. Elements are structurally tied to a block (child element), e. g. a text field within a button. A modifier defines a certain property of a block or element and displays its condition, such as the button being colored red. All blocks, elements and modifiers are displayed by classes and by naming them, it is possible to define their individual task and relation to another.

The advantage: While an ID, for example, can only be assigned once, it is possible to use classes several times and still label an element explicitly. All interrelated classes can be captured at once. Just as with SMACSS, BEM also improves the readability of a code and enables developers, who haven't been part of the design, to have a quick start. In addition, you can set up a CSS like a family tree with BEM and constantly extend it.

Nevertheless, this is a disadvantage as well: By repeating tribes and because of different class names the CSS code gets longer and longer - and the corresponding file gets larger. Depending on the extent, this can lead to increased loading times for a website.

SMACSS and BEM – a good combination

Practice shows that both approaches can be combined quite well. If you want to choose just one, though: It depends on the developer’s personal preferences, as well as the project’s properties and size whether the choice will be SMACSS or BEM.