https://github.com/scriptype/bem
A small utility for creating dynamic BEM classnames.
https://github.com/scriptype/bem
Last synced: about 1 year ago
JSON representation
A small utility for creating dynamic BEM classnames.
- Host: GitHub
- URL: https://github.com/scriptype/bem
- Owner: scriptype
- Created: 2015-09-21T21:37:58.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-09-21T22:03:09.000Z (over 10 years ago)
- Last Synced: 2025-02-26T07:36:31.627Z (about 1 year ago)
- Language: JavaScript
- Size: 89.8 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# bem
A small utility for creating dynamic BEM classnames.
### Install
`npm i dynamic-bem-classnames`
### Usage
`var bem = require('bem');`
or
`define(['path/to/bem'], function...)`
or
``
then
```js
var itemClasses = bem.makeClassName({
block: 'foo-list',
element: 'item',
modifiers: {
active: function (blockName, element, modifiers) {
return true // logic
},
hidden: true // hardcode
}
})
// "foo-list__item foo-list__item--active foo-list__item--hidden"
```
`block` is mandatory to at least have a base class string.
`element` and `modifiers` options are optional.
`modifiers` is an object accepting multiple modifier conditions.
### Customize
You don't have to use default delimiters for elements and modifiers:
```js
bem.setDelimiters({
modifier: '__'
element: '⛄',
})
// bem.makeClass(...)
```
### Development
I've preferred to use ES6 syntax and APIs in the source code. This means, we
need babel to transpile it. And uglify for uglify.
- `npm i -g babel`
- `npm i -g uglify`
- `npm run build`