bemmer
v1.1.0
Published
BEM-like simple classname builder.
Downloads
702
Readme
bemmer
bemmer
is a BEM-like simple classname builder.
If you taking pains by handling CSS selector (such as classnames), Try the BEM with with Component oriented design with React. bemmer
helps it. See Example with React.
Example
import bemmer = from '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"
API
bemmer.createBuilder()
bemmer.createBuilder(...initialClassNames: string[]): Builder
Create a builder
function.
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
)
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:
const TodoList = React.createClass({
render() {
const b = bemmer.createBuilder('todoList', this.props.className);
const listItems = this.props.listItems.map((listItem, i) => {
return (
<li className={b('item', { odd: i % 2 === 1 })}>
<span className={b('item__title')}>
{listItem.title}
</span>
<span className={b('item__createdAt')}>
{listItem.createdAt}
</span>
</li>
);
});
return (
<ul className={b()}>
{listItems}
</ul>
);
},
});
Result:
<ul class="todoList classNameFromProps">
<li class="todoList__item todoList__item--odd classNameFromProps__item classNameFromProps__item--odd">
<span class="todoList__item__title classNameFromProps__item__title">
v1.0.0
</span>
<span class="todoList__item__createdAt classNameFromProps__item__createdAt">
2016-03-08
</span>
</li>
<li class="todoList__item classNameFromProps__item">
<span class="todoList__item__title classNameFromProps__item__title">
v0.4.1
</span>
<span class="todoList__item__createdAt classNameFromProps__item__createdAt">
2015-09-28
</span>
</li>
<li class="todoList__item todoList__item--odd classNameFromProps__item classNameFromProps__item--odd">
<span class="todoList__item__title classNameFromProps__item__title">
v0.3.2
</span>
<span class="todoList__item__createdAt classNameFromProps__item__createdAt">
2015-09-16
</span>
</li>
</ul>
CSS (less) Example:
.todoList
&__item
// ...
&--odd
//...
&__title
// ...
&__createdAt
// ...
It is so simple! 👏
License
MIT