❤
npm
Sign UpSign In

bemcn

1.0.3 • Public • Published

view on npm npm module downloads Build Status Coverage Status Dependency Status Join the chat at https://gitter.im/bemcn

bemcn

bemcn is an utility for creating BEM class names.

Explanation

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

<script src="path/to/bemcn.js"></script>
<script>
    var bcn = bemcn('__', '--');
    bcn('block')('element')('modifier');
</script> 

AMD

requirejs(['path/to/bemcn'], function(bemcn) {
    var bcn = bemcn('__', '--');
    bcn('block')('element')('modifier');
});

Node.js

var bemcn = require('bemcn');
var bcn = bemcn('__', '--');
bcn('block')('element')('modifier');

Functions

bemcn(ep, mp, [wbd]) ⇒ b

BEM class names

b(v) ⇒ e

block creator

e([v]) ⇒ m

element creator

m([v], [wb]) ⇒ string

modifier and result creator

bemcn(ep, mp, [wbd]) ⇒ b

BEM class names

Kind: global function
Returns: b - - block creator

Param Type Description
ep string element prefix
mp string modifier prefix
[wbd] boolean with base class name (default value)

b(v) ⇒ e

block creator

Kind: global function
Returns: e - - element creator

Param Type Description
v string block name

e([v]) ⇒ m

element creator

Kind: global function
Returns: m - - modifier and result creator

Param Type Description
[v] string element name

m([v], [wb]) ⇒ string

modifier and result creator

Kind: global function
Returns: string - - result

Param Type Description
[v] string modifier name
[wb] boolean with base class name (default wbd)

Example

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

Readme

Keywords

Package Sidebar

Install

npm i bemcn

Repository

github.com/uxter/bemcn

Homepage

github.com/uxter/bemcn#readme

Weekly Downloads

3

Version

1.0.3

License

ISC

Last publish

Collaborators

  • shcoder
Try on RunKit
Report malware