What Is BEM and SUIT?

BEM and SUIT are class naming conventions that help to keep stylesheets function-oriented and organized, as well as helping other developers recognize the purpose of various classes.

These two methodologies lay out a naming convention for classes that make it easier to keep your styles tightly function-oriented, and helps other developers recognize the purpose of various classes just from the way they’re named.

BEM was the forerunner of this type of class naming methodology, created by Yandex. The SUITmethodology is an approach based on BEM, but with some adjustments and additions made by Nicholas Gallagher. SUIT does everything BEM does, but to many users, it is considered an enhancement.

Working with these methods definitely helps to produce better, more well-structured CSS. However, the tricky part is that it can become tiresome manually typing out the class names required in this structure, and keeping track of how classes inter-relate can become a bit of a headache. 

The postcss-bem plugin by Malte-Maurice Dreyer alleviates these issues through a combination of shortcuts and nesting, which you will learn to use as we move through this tutorial.

But first, let’s have a quick primer on the BEM and SUIT methods, to make sure you have a clear picture of the benefits of using the postcss-bem plugin, and of the way it’s used.

  • SUIT is like BEM, but with some extras added and adjustments made

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top