unb

unbem

A small utility for working with BEM in Javascript

Showing:

Popularity

Downloads/wk

4

GitHub Stars

1

Maintenance

Last Commit

4yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.5KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

React CSS-in-JS

Readme

unbem

unbem

A tiny ~330 byte utility for working with BEM classes and CSS-modules in Javascript

Motivation

Working with BEM in Javascript can be a pain, especially if you are using CSS Modules and JSX.

Having to write stuff like className={styles['my-block__my-element--modifier']} gets old fast. Then you find yourself concatinating and conditionally applying classes, and you soon wish upon death.

// THIS IS NOT FUN

import styles from './MyComponent.css'

const MyComponent = props => {
  const classes = [
    styles.block__element,
    styles['block__element--some-modifier'],
    props.magicNumber === 42 && styles['block__element--unhappy']
  ].filter(Boolean).join(' ')

  return (
    <h1 className={classes}>
      Hello, world!
    </h1>
  )
}

Solution

Installation

npm install unbem

Usage

Unbem delivers two functions: unbem and bind.

The unbem function

It expects the first argument to be either a block or an element. The rest of the arguments get applied as modifiers to the if the string starts with --. Falsy arguments are omitted.

import { unbem } from 'unbem'
import styles from './MyComponent.css'

const magicNumber = 42

const classes = unbem(
  'block__element',
  '--happy',
  magicNumber === 42 && '--super-happy'
)

console.log(classes)
// > "block__element block__element--happy block__element--super-happy"

If the string does not start with -- the class gets append in its entirety.

const classes = unbem(
  'block__element',
  'something__else',
  magicNumber === 42 && '--cool'
)

// > "block__element something__else something__else--cool"

Notice how the --cool modifier gets applied to the something__else element, not the block__element. The modifier gets applied to the previous non-modifier.

The bind function

Unbem comes with a useful function for when you are using CSS modules. The bind function returns an unbem function that is bound to a CSS module object.

import { bind } from 'unbem'
import styles from './component.css'

const unbem = bind(styles)

const myClasses = unbem('my__block', '--active')
// > "prefix-my__block[hash] prefix-my__block--active[hash]

Improving conditionally applying classes

Unbem has a similiar API to the well known classnames package often used in React projects.

Every argument you pass in can be either an a string, object, or an array. If the argument is falsy it will be ignored.

Strings

const classes = unbem('block__element', '--happy', somethingTruthy && '--super-happy')
// > "block__element block__element--happy, block__element--super-happy"

Objects

Every key on the object gets appended if the value is truthy.

const classes = unbem('block__element', { ['--happy']: magicNumber === 42 })
// > "block__element block__element--happy"

Arrays

Unbem resolves each items in the array. You can even have arrays inside arrays (but don't).

const classes = unbem('block__element', [
  '--happy',
  { ['--super-happy']: 2 + 2 === 4 },
  somethingFalsy && '--not-happy'
])

// > "block__element block__element--happy block__element--super-happy"

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100

Alternatives

radiumA toolchain for React component styling.
User Rating
5.0/ 5
2
Top Feedback
N/A
GitHub Stars
7K
Weekly Downloads
76K
rr
react-responsiveCSS media queries in react - for responsive design, and more.
User Rating
4.8/ 5
6
Top Feedback
2Great Documentation
2Highly Customizable
1Easy to Use
GitHub Stars
6K
Weekly Downloads
408K
emotion👩‍🎤 CSS-in-JS library designed for high performance style composition
User Rating
4.5/ 5
17
Top Feedback
11Great Documentation
10Easy to Use
7Highly Customizable
GitHub Stars
14K
Weekly Downloads
641K
aphroditeFramework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
User RatingN/A
Top Feedback
N/A
GitHub Stars
5K
Weekly Downloads
124K
styled-componentsVisual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
User Rating
4.7/ 5
221
Top Feedback
29Easy to Use
29Highly Customizable
27Great Documentation
GitHub Stars
35K
Weekly Downloads
3M
See 63 Alternatives