A simple utility for conditionally joining classes together following BEM methodology

BEM documentation: https://getbem.com/

Install inside your project using NPM

npm install react-bemthis

react-bemthis works better with SCSS modules for scoped styles. In this example we use SCSS but this also works with CSS

Then, declare it like this in your React component:

import bem from "react-bemthis";
import styles from "./MyComponent.module.scss";

const { block, element } = bem(styles);

react-bemthis automatically detects the block of you SCSS file.

If you respect the BEM methodology, it should be the only class with no "__" or "--". In any case, if you need to override the default block found, you can do bem(styles, 'some-other-block-name').

Then, in your template, you can use it like this:

<ul className={block()}>
  <li className={element("item")}>
    <a href="example.com" className={element("link")}>
      Link
    </a>
  </li>
</ul>

react-bemthis also you to add modifier for both block and elements. You have multiple to apply modifiers.

For example for a block named "list", it will get the scoped styles for:

• block("listModifier") -> .list .list--listModifier
• block(["one", "two"]) -> .list .list--one .list--two
• block({ one: true, two: false }) -> .list .list--one

Of course, it works the same with element. For example for an element "item":

• element("item", "itemModifier") -> .list__item .list__item--itemModifier
• element("item", ["one", "two"]) -> .list__item .list__item--one .list__item--two
• element("item", { one: true, two: false }) -> .list__item .list__item--one

Also, you SCSS could look like this:

.list {
  // styles for list

  &--listModifier {
    // styles for list with modifier "listModifier"
  }

  &__item {
    // styles for item

    &--itemModifier {
      //styles for item with modifier "itemModifier"
    }
  }

  &__link {
    // styles for link
  }
}

react-bemthis gives you the possibility to replace block and element methods with respective alias b and e