🍭 BEM-like simple classname builder.
JavaScript
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
distributions v1.1.0 Apr 13, 2016
sources Remove uniquenizing in Bem.fromFullClassName() Apr 13, 2016
tests
.babelrc Bugfix: babel plugin "transform-object-assign" was forgetten Mar 6, 2016
.eslintrc.js Install eslint Mar 8, 2016
.gitignore Update README Mar 14, 2015
LICENSE Add LICENSE file Aug 15, 2015
README.md Update README Mar 8, 2016
example.js Update README and Example Mar 8, 2016
logo.jpg Update logo Mar 6, 2016
package.json v1.1.0 Apr 13, 2016

README.md

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