Discussion on: What is BEM and why use it to name your HTML classes!

[Slava Borodulin]

BEM was cool but after CSS modules appear it dead. Migration from BEM to CSS modules is the best thing that can happen with the project.

[Slava Borodulin]

Using BEM in clean way is very tedious. You should manage a huge number of classes per each compnent: element class, modificators classes, classes from block determine positon current element as a child. And this mess grown up with some extra logic. React example:

<h5 className=={classnames(
  "settings-title",
  "settings-title--main",
  "settings-title--with-icon",
  {
    "settings-title--fillied": isSettingsFilled
  }
  "video-settings__title",
  className,
)}>
  Video Settings
</h5>

There is no way to use BEM without extra tools like

bem / bem-react

A set of tools for developing user interfaces using the BEM methodology in React.

bem-react ·

A set of tools for developing user interfaces using the BEM methodology in React. BEM React supports TypeScript type annotations.

Packages

Package	Version	Size
@bem-react/classname
@bem-react/classnames
@bem-react/core
@bem-react/di
@bem-react/eslint-plugin		—

Contribute

Bem React Core is an open source library that is under active development and is also used within Yandex.

If you have suggestions for improving the API, you can send us a Pull Request.

If you found a bug, you can create an issue describing the problem.

For a detailed guide to making suggestions, see: CONTRIBUTING.md.

License

© 2018 Yandex. Code released under Mozilla Public License 2.0.

View on GitHub

But any tool is extra abstraction in your code

[Irina Kats]

This might be a holywar... At least, there are different opinions about it, such as andrejgajdos.com/css-modules-vs-cs... or medium.com/@perezpriego7/css-evolu....