cssnaming-conventionsbemsuit-css

The differences between BEM and SUIT CSS naming conventions


What are the differences between BEM and SUIT CSS naming conventions?


Solution

  • 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.