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 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
• builder

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