https://github.com/axross/bemmer
:lollipop: BEM-like simple classname builder.
https://github.com/axross/bemmer
Last synced: 4 months ago
JSON representation
:lollipop: BEM-like simple classname builder.
- Host: GitHub
- URL: https://github.com/axross/bemmer
- Owner: axross
- License: mit
- Created: 2015-03-04T16:28:13.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-07-26T15:03:26.000Z (about 9 years ago)
- Last Synced: 2024-05-01T20:29:50.763Z (over 1 year ago)
- Language: JavaScript
- Homepage:
- Size: 477 KB
- Stars: 52
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# bemmer
[`bemmer`](https://github.com/axross/bemmer) is a [BEM](https://en.bem.info/)-like simple classname builder.
[](http://badge.fury.io/js/bemmer)
[](https://circleci.com/gh/axross/bemmer/tree/master)
[](LICENSE)
If you taking pains by handling CSS selector (such as classnames), Try the BEM with with Component oriented design using React. `bemmer` helps it. [See Example with React](#use-with-react).
## Example
```javascript
const bemmer = require('bemmer');
const builder = bemmer.createBuilder('todoList', 'externalClassName');
builder('__items');
// => "todoList__items externalClassName__items"
builder('__items__item', { finished: true });
// => "todoList__items__item todoList__items__item--finished" +
// "externalClassName__items__item externalClassName__items__item--finished"
```
## Usage
Use with [Browserify](http://browserify.org/) or [webpack](http://webpack.github.io/).
```sh
$ npm i -S bemmer
```
```javascript
// ES2015 imports
import bemmer from 'bemmer';
// ES5 require
const bemmer = require('bemmer');
```
## API
- [bemmer.createBuilder](#bemmercreatebuilder)
- [builder](#builder)
### bemmer.createBuilder
```
create(classname: string [... classname: string]): function
```
Create a [`builder`](#builder) function.
```javascript
const builder = bemmer.createBuilder('todoList');
// can plural arguments, use with React
const builder = bemmer.createBuilder('todoList', this.props.className);
// parse a BEM-like full classname
const builder = bemmer.createBuilder('todoList__item--finished');
```
Alias: `bemmer.create` (not recommended)
### builder
```
builder([elements :string [, modifiers :object]]): string
```
Build a BEM-like full classname. When result are plural class name, It joined with whitespace. (ex. `todoList__item externalClassName__item`)
```javascript
const builder = bemmer.createBuilder('todoList', 'main__todoList');
builder('__item', { odd: true });
// => "todoList__item todoList__item--odd main__todoList__item main__todoList__item--odd"
```
#### Use with React
##### Component:
```javascript
const TodoList = React.createClass({
render() {
const b = bemmer.createBuilder('todoList', this.props.className);
const listItems = this.props.listItems.map((listItem, i) => {
return (
{listItem.title}
{listItem.createdAt}
);
});
return (
{listItems}
);
},
});
```
##### Result:
```html
-
v1.0.0
2016-03-08
-
v0.4.1
2015-09-28
-
v0.3.2
2015-09-16
```
##### CSS (less) Example:
```less
.todoList
&__item
// ...
&--odd
//...
&__title
// ...
&__createdAt
// ...
```
It is so simple! 👏
## License
MIT