bemclassnames

1.0.4 • Public • Published

BEMclassnames

A simple javascript utility for conditionally creating classNames in BEM notation.

Content.

##GitHub. Progect on GitHub.

Install.

npm install bemclassnames --save-dev

##Usage. The BEMClassNames function takes any number of arguments which can be a string, object or array. The argument blockName must be a string is a block's name, elementName string optional argument is the block's element's name. All other optional elements may be any of a string, object or array and defines set of modificators. In case of object if it's key s falsy, it won't be included in the output. Dublicated or falsy modificators won't be included in the output too.

	import BEMclassnames from 'bemclassnames';

or add script BEMClassNames.js from web/BEMClassNames.js in branch master and add itinto your HTML:

	<script src="./BEMClassNames.js"></script>

and use:

	BEMClassNames(''); // => ''
	BEMClassNames('blockName'); // => 'blockName'
	BEMClassNames('blockName', ''); // => 'blockName'
	BEMClassNames('blockName', 'elementName'); // => 'blockName__elementName'
	BEMClassNames('blockName', 'elementName', 'mod1'); // => 'blockName__elementName blockName__elementName_mod1'
	BEMClassNames('blockName', 'elementName', 'mod1', ''); // => 'blockName__elementName blockName__elementName_mod1'
	BEMClassNames('blockName', 'elementName', 'mod1', 'mod2'); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', ['mod1', 'mod2']); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', 'mod1', {mod2: true}); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', ['mod1', {mod2: true}]); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', 'mod1', {mod2: false}); // => 'blockName__elementName blockName__elementName_mod1'
	BEMClassNames('blockName', 'elementName', {mod1: true, mod2: true}); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', {mod1: false, mod2: true}); // => 'blockName__elementName blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', 'mod1', 'mod2', 'mod1'); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', 'mod1', {mod1: false, mod2: true}); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2'
	BEMClassNames('blockName', 'elementName', 'mod1', {mod1: false, mod2: true}, ['mod2', 'mod3', {mod4: true}]); // => 'blockName__elementName blockName__elementName_mod1 blockName__elementName_mod2 blockName__elementName_mod3 blockName__elementName_mod4'
	BEMClassNames('blockName', 'elementName', {mod1: false}, 'mod1'); // => 'blockName__elementName blockName__elementName_mod1'

##Support. Supported browsers IE9+.

##License MIT Copyright (c) 2017 Kuznetsov Leonid.

Package Sidebar

Install

npm i bemclassnames

Weekly Downloads

1

Version

1.0.4

License

MIT

Last publish

Collaborators

  • kuznetsovlv