zapier/bemify-js

Name: bemify-js

Owner: Zapier

Description: :corn: Simple BEM prefixing of CSS classes

Created: 2016-02-01 00:04:29.0

Updated: 2017-09-13 21:19:09.0

Pushed: 2017-12-11 17:39:54.0

Homepage:

Size: 10

Language: JavaScript

GitHub Committers

User	Most Recent Commit	# Commits

Other Committers

User	Email	Most Recent Commit	# Commits

README

bemify-js

Simple package to facilitate BEM CSS class naming in JS with less verbosity.

Examples

bemify takes a block string as its first argument which will prefix all modifier and element classes supplied within the second argument. Non-modifier/element classes remain unaffected.

upply a string and all modifiers will be applied to the block.
fy('block', '--modifier-a --modifier-b');
eturns 'block block--modifier-a block--modifier-b'

upply a string with an element in it and all modifiers
ill be applied to the element. Note that you can only
upply one element at a time; an element can't be two
lements at once. Whoa.
fy('block', '__element --modifier-a --modifier-b');
eturns 'block__element block__element--modifier-a block__element--modifier-b'

upply an array of classes and all the truthy ones
ill be applied to the block.
fy('block', [
-modifier-a',
-modifier-b',

eturns 'block block--modifier-a block--modifier-b'

upply an object whose values indicate whether or not
he class should be applied.
fy('block', {
-modifier-a': true,
-modifier-b': false,
-modifier-c': true,
ome-utility': true,
ome-other-utility': false,

eturns 'block block--modifier-a block--modifier-c some-utility'

bemify` is curried, allowing you to easily apply classes
or the same block without duplication.
t bem = bemify('block');
'--modifier-a --modifier-b');
eturns 'block block--modifier-a block--modifier-b'
'__element --modifier-a --modifier-b');
eturns 'block__element block__element--modifier-a block__element--modifier-b'

toModifiers is exported as a utility function for your using pleasure. It transforms its passed arguments into modifier (--) versions, returning an array of those modifiers. It accepts the same possible argument types as bemify's second argument, ie strings, arrays, objects, or a combination. Useful for when you don't want to pepper -- throughout your code.

upply a space separated string and it'll be split.
difiers('a b c');
eturns ['--a', '--b', '--c']

upply an array of strings and they'll be `map`ped into modifiers.
difiers(['a', 'b', 'c']);
eturns ['--a', '--b', '--c']

upply an object whose values indicate whether or not
he modifiers should be used.
difiers({ a: true, b: true, c: true, d: false });
eturns ['--a', '--b', '--c']

Check out the tests for complete examples.