https://github.com/uxter/bemcn

:boom: Utility for creating BEM class names.
https://github.com/uxter/bemcn

bem bem-methodology block classnames element modifier

Last synced: 7 months ago
JSON representation

:boom: Utility for creating BEM class names.

• Host: GitHub
• URL: https://github.com/uxter/bemcn
• Owner: uxter
• License: isc
• Created: 2017-10-27T22:03:23.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2017-11-29T07:41:06.000Z (over 8 years ago)
• Last Synced: 2025-03-01T03:13:29.487Z (about 1 year ago)
• Topics: bem, bem-methodology, block, classnames, element, modifier
• Language: JavaScript
• Homepage:
• Size: 34.2 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.hbs
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
[![view on npm](http://img.shields.io/npm/v/bemcn.svg)](https://www.npmjs.org/package/bemcn)

[![npm module downloads](http://img.shields.io/npm/dt/bemcn.svg)](https://www.npmjs.org/package/bemcn)

[![Build Status](https://travis-ci.org/uxter/bemcn.svg?branch=master)](https://travis-ci.org/uxter/bemcn)

[![Coverage Status](https://codecov.io/gh/uxter/bemcn/branch/master/graph/badge.svg)](https://codecov.io/gh/uxter/bemcn)

[![Dependency Status](https://david-dm.org/uxter/bemcn.svg)](https://david-dm.org/uxter/bemcn)

[![Join the chat at https://gitter.im/bemcn](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/bemcn?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

# bemcn

bemcn is an utility for creating BEM class names.

## Explanation

```js

var bc = bemcn('__', '--');

bc('b')()()             // b

bc('b')()('m')          // b--m

bc('b')()('m', true)    // b b--m

bc('b')('e')()          // b__e

bc('b')('e')('m')       // b__e--m

bc('b')('e')('m', true) // b__e b__e--m

```

```js

var bc = bemcn('__', '--', true);

bc('b')()()              // b

bc('b')()('m', false)    // b--m

bc('b')()('m')           // b b--m

bc('b')('e')()           // b__e

bc('b')('e')('m', false) // b__e--m

bc('b')('e')('m')        // b__e b__e--m

```

## Install

```

$ npm install --save bemcn

```

## Usage

#### Browser

```html

    var bcn = bemcn('__', '--');

    bcn('block')('element')('modifier');

```

#### AMD

```js

requirejs(['path/to/bemcn'], function(bemcn) {

    var bcn = bemcn('__', '--');

    bcn('block')('element')('modifier');

});

```

#### Node.js

```js

var bemcn = require('bemcn');

var bcn = bemcn('__', '--');

bcn('block')('element')('modifier');

```

{{>main}}

## Example

```js

var bcn = bemcn('__', '--', true);

var form = bcn('form');

var field = form('field');

var label = form('label');

form()('inline') // form form--inline

field()          // form__field

field('error')   // form__field form__field--error

label()          // form__label

label('hidden')  // form__label form__label--hidden

```

## Note on Patches/Pull Requests

1. Fork the project.

2. Make your feature addition or bug fix.

3. Send me a pull request.

* * *

© 2017 Vasily Shilov