Blithe-Chiang/bem

Functions for using BEM naming conventions in CSS and CSS Modules and applying them seamlessly in JavaScript.

@jahed/bem

Functions for using BEM in CSS and CSS Modules.

• Using CSS Modules with BEM
• @jahed/bem, A Brief History

Installation

# NPM
npm install @jahed/bem

# Yarn
yarn add @jahed/bem

Usage

import { bem } from '@jahed/bem'

const className = bem('MyElement', {
  color: 'red',
  active: true,
  disabled: false
})

console.log(className)
// .MyElement .MyElement--color--red .MyElement--active

CSS Modules

The example below assumes you've configured CSS Modules to render classes with a -hash suffix.

import { bemModule } from '@jahed/bem'
import styles from 'styles.module.css'

cont bem = bemModule(styles)

const className = bem('MyElement', {
  color: 'red',
  active: true,
  disabled: false
})

console.log(className)
// .MyElement-hash .MyElement-hash--color--red .MyElement-hash--active

For more thorough examples, see the tests and blog posts linked above.

API

For complete API documentation, see the documentation website.

bem(block: string, modifiers: object<string, (boolean|number|string)?>): string

Generates BEM-compliant class names for the given block (or element) with modifiers.

Examples

---

bemModule(cssModuleLocals): bem

Generates a bem-compliant function which maps the resulting class names to the given cssModuleLocals map.

Examples

---

join(...string): string

Joins the given strings with a whitespace ( ), filtering any falsy values (such as undefined, null, false, '').

Examples

---

License

MIT