Menu
What are the differences between BEM and SUIT CSS naming conventions?
273
BEM stands for Block, Element, and Modifier. It's a CSS naming convention for writing cleaner and more readable CSS classes. BEM also aims to write independent CSS blocks in order to reuse them later in your project.
The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.
BEM names intentionally use double underscores and double hyphens instead of single to separate Block-Element-Modifier. The reason is so that single hyphens can be used as word separators. Class names should be very readable, so abbreviation isn't always desirable unless the abbreviations are universally recognizable.
According to bem.info (source):
We use hyphen to separate words in long names […] and two underscores to separate the name of the block form the name of the element […]
But you can use any other separators for it.
So, it's possible to use BEM with another syntax. The syntax of SUIT CSS is a valid alternative syntax for BEM.
Additionally, Nicolas Gallagher renamed blocks (BEM) to components (SUIT), and elements (BEM) to descendants (SUIT).
Is one better suited for certain types of projects the other?
If you plan to use the full BEM methodology (see this article for an example), including the tools from Yandex, then keep the original BEM conventions.
Otherwise, it's up to your preference.
96
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
