reBEM Helper

A simple BEM helper using ReasonMl

How to install

1. Install reBEM Helper

npm install rebem-helper

or

yarn add rebem-helper

2. Add rebem-helper to "bs-dependencies" section of bsconfig.json

How to use

open ReBemHelper;

/* Write my-block my-block--active */
let isActive = true;
let myBemClassNames = bem(~block="my-block", ~modifiers=[Boolean("active", isActive)], ());

open ReBemHelper;

/* Write class names: my-block my-block--small */
let mySizeBemClassNames = bem(~block="my-block", ~modifiers=[String("small")], ());

open ReBemHelper;
/* Write class names: my-block my-block--active my-block--small my-block--disable */
let mySizeBemClassNames = bem(
  ~block="my-block",
  ~modifiers=[
    String("small"),
    Boolean("active", isActive),
    Switch("enable", "disable", false)
  ],
  ()
);

open ReBemHelper;
/* Write class names: my-block__element my-block__element--small some-other-class */
let mySizeBemClassNames = bem(~block="my-block", ~element="element", ~modifiers=[String("small")], ~others="some-other-class", ());

Modifier list

• String(modifierName) String(string)
• Boolean(modifierName, shouldShowModifierName) Boolean(string, bool)
• Switch(activeModifierName, unactiveModifierName, isActiveModifierName) Switch(string, string, bool)

Examples

See more examples in examples folder:

Development

Install and code.

yarn install
yarn start

Run tests

yarn test

Run tests (on watch)

yarn test:dev

How to contribute

Please feel free to write an issue/PR if you see/want somethings.