Fast and powerful classnames utility for in your javascript application. Easy to use and fast to type interface for creating BEM classnames in your client-side applications.
const block = bem('block', { $big: truthy })
// 'block block--big'
const element = block('element', {
$modifier: truthy,
extraClass: true
})
// 'block__element block__element--modifier extraClass'npm install bem-classesYou can use any variable name you like.
import bem from 'bem-classes'
var bem = require('bem-classes')You can also grab the bem-classes.js file from the repository.
Pass the arguments to the imported function and it returns a classes facotry.
This instance implements the toString method which will return the class string when a string is expected.
You can also call .toString() explicitly to return the class string.
bem('block')
// => { [Function: factory] toString: [Function] }
bem('block').toString()
// => 'block'
`${bem('block')}`
// => 'block'You can pass strings or key-value pairs as arguments. The key of a key-value pair only gets added as a class if the value is truthy. You can add as many arguments as you like.
`${bem('block', 'column')}`
// => 'block column'
`${bem('block', { column: true })}`
// => 'block column'
`${bem('block', { column: false })}`
// => 'block'
`${bem('block', { column: false }, 'class1 class2 class3')}`
// => 'block class1 class2 class3'
`${bem('block', { column: false }, 'class1', 'class2', 'class3')}`
// => 'block class1 class2 class3'The first valid class becomes the block class.
Use the prefix - or $ for a modifier.
`${bem('block')}`
// => 'block'
`${bem('block', '-modifier')}`
// => 'block block--modifier'
`${bem('block', '$modifier')}`
// => 'block block--modifier'
`${bem('block', { '-modifier': true })}`
// => 'block block--modifier'
`${bem('block', { $modifier: true })}`
// => 'block block--modifier'
`${bem('block__element', '$modifier')}`
// => 'block__element block__element--modifier'You can extend the returned object by calling the block. This can be useful for building a React class as a block with the elements inside.
const block = bem('block', { $modifier: true })
`${block}`
// => 'block block--modifier'
`${block('element', { $modifier: true })}`
// => 'block__element block__element--modifier'
const element = bem('block')('element')
// => 'block__element'An example in react showing the power and flexibility of bem-classes
import bem from 'bem-classes'
const BemExample = (props) => {
const block = bem('block')
const element = block('element', {
$modifier: props.thisPropIsTruthy,
extraClass: true
})
return (
<div className={block}>
<div className={element}>Hello World</div>
</div>
)
}<div class="block">
<div class="block__element block__element--modifier extraClass">Hello World</div>
</div>npm test
npm run ci
npm run build
npm run watch
npm test
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent