Constructs BEM classes from block, element and modifiers attributes.
Last updated 6 years ago by jedmao .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-transform-bem 
SYNC missed versions from official npm registry.


NPM version npm license Travis Build Status


A react-transform that constructs BEM classes from block, element and modifiers attributes.


Warning: This project is not yet production ready.

Writing BEM classes in your HTML can be a pain; instead, this transform constructs class names for you. All you have to do is specify which DOM elements are blocks with the block attribute, elements with the element attribute and modifiers with the modifiers attribute. These attributes will be consumed and replaced with the className attribute, where all necessary class names are written.


$ npm install react-transform-bem [--save[-dev]]


The following React component...

export default () => (
	<div block="person" modifiers="female">
		<div element="mouth" />
		<div element="hand" modifiers="right open" />


<div class="person person--female">
	<div class="person__mouth"></div>
	<div class="person__hand person__hand--right person__hand--open"></div>

To prevent too many class names from being generated, you won't find classes like person--female__mouth and especially not person--female__hand--right; instead, you would target person__mouth within person--female by writing .person--female .person__mouth in CSS. This increases CSS specificity only slightly and only when a modifier is used, which is still quite maintainable.


A common strategy is to place a babelrc file at your project root. Here is a default configuration for babel-plugin-react-transform:

	"presets": ["react", "es2015"],
	"plugins": [
		["react-transform", {
			"transforms": [
					"transform": "react-transform-bem",
					"imports": [
					"blockPrefix": "",
					"elementPrefix": "__",
					"modifierPrefix": "--"



Type: String
Required: false
Default: empty

You may wish to namespace all of your BEM blocks. The blockPrefix allows you to do this. If you set blockPrefix to foo-, all of your blocks will be prefixed with foo- (e.g., foo-block1, foo-block2).


Type: String
Required: false
Default: __

The string that appears between a BEM block its elements (e.g., block__element).


Type: String
Required: false
Default: --

The string that appears between a BEM block and its modifiers (e.g., block--modifier); also, between a BEM element and its modifiers (e.g., block__element--modifier).

Current Tags

  • 0.0.8                                ...           latest (6 years ago)

8 Versions

  • 0.0.8                                ...           6 years ago
  • 0.0.7                                ...           6 years ago
  • 0.0.6                                ...           6 years ago
  • 0.0.4                                ...           6 years ago
  • 0.0.3                                ...           6 years ago
  • 0.0.2                                ...           6 years ago
  • 0.0.1                                ...           6 years ago
  • 0.0.0                                ...           6 years ago
Maintainers (1)
Total 619
Today 0
This Week 8
This Month 8
Last Day 0
Last Week 0
Last Month 8
Dependencies (5)
Dev Dependencies (11)
Dependents (0)

Copyright 2014 - 2021 © |