Skip to content

axross/bemmer

Repository files navigation

bemmer

bemmer is a BEM-like simple classname builder.

npm version Circle CI license

bemmer

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.

Example

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 or webpack.

$ npm i -S bemmer
// ES2015 imports
import bemmer from 'bemmer';

// ES5 require
const bemmer = require('bemmer');

API

bemmer.createBuilder

create(classname: string [... classname: string]): function

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