JS-BEMTO
Very simple and elegant way to write bem classes inside js.
;const isActive = false;const isBright = true;const b = ;const e = b; assert;assert;
Table of Contents
Install
it is a common npm module. Works both for node and browser (for tools like browserify and webpack)
npm i --save js-bemto
Settings
By default this library uses default separators which is advised by BEM
If you prefer something else, you could extract next methods:
; ;;;
Overview
Blocks
Block is the main entry point for an entity. In terms of components, it's usually a separated entity (for instance, react component usually has it's own block).
To create a block, just create new block and invoke it without any arguments:
;const b = ;assert;
If you decide to create another block with some additional modifiers, just invoke it with string starting with modifier prefix:
assert;
And, of course, you could add usual classes. Just pass them after block name when create one:
const b = ;assert;
Elements
Elements are bricks of your blocks. You could read more about it here here. To create element, just invoke created block with string which represents element name and it's modifiers + usual classes:
const b = ;// there are no meaning in this, but it could be more readableconst e = b; assert;
As you can see, you can apply the same rules as for blocks for usual classes. And if you need several modifiers, just list them one by one (applicable both for blocks and elements):
const b = ; assert;
Conditional Classes
There are two options to use arbitrary classes – string inlining or object notation. String is very intuitive – just pass ? mark after your class and then true of false string. Combining with es6 syntax it is very easy:
const b = ; const isActive = false;const isDark = true;assert;
Of course, it isn't great idea to put too much modifiers in a row, so you could object notation:
const b = ; const isActive = true;const isDark = false;assert
If you want to create element, just pass it as a first class name inside string or as '&element' key in object notation. And you could usual classes with conditions too:
const b = ;const e = b; const isActive = true;const isHidden = true;assert;assert;
You can't use both options when you actually create block (when invoking bem).
Usage
The goal of this library to minimize pain (mostly for react.js and it's jsx, but it could be applied to any classes which are generated from js). You could simple change one letter in initializing and all your block and elements would correspond!
;const b = ;const e = b; return <div className=> <img className= /> <h2 className=> 'My own title!' </h2> </div>;
this will turn into:
My own title!
If you will render this component very often, it could make sense to put it in component closure, though you lose creating new class names in runtime. In case of static components it isn't a problem, so you could try it.
And you could use this approach with other frameworks as well, for instance, you could expose it in your knockout components as well.
This library was inspired by bemto jade mixins.