rbe

rbem

bem__naming-made--easy

Showing:

Popularity

Downloads/wk

2

GitHub Stars

4

Maintenance

Last Commit

5yrs ago

Contributors

1

Package

Dependencies

0

Size (min+gzip)

0.7KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

Rbem

Build Status

Tiny library without dependencies for better BEM naming.

Instalation

npm install --save rbem

Best with Webpack and Babel:

import { block, applyModifiers } from 'rbem';

Basics

Rbem comes with two functions block and applyModifiers.

block is a higher order function that is used for creating namespace for single component. Block produces elements:

import { block } from 'rbem';

// block - single namespace for all dependent elements
const btn = block('button'); // -> function

// elements - multiple instances of block
const icon = btn('icon'); // -> 'button__icon'
const text = btn('text'); // -> 'button__text'

applyModifiers function takes care of adding modifiers both to blocks and elements:

import { block, applyModifiers } from 'rbem';

const btn = block('button');
const primaryButton = applyModifiers(btn, 'primary'); // -> 'button--primary'
const icon = btn('icon'); // -> 'button__icon'
const lightIcon = applyModifiers(icon, 'light');
// -> 'button__icon button__icon--light'

Best with React

import React, { Component } from 'react';
import { block, applyModifiers } from 'rbem';

export default class Button extends Component {
  constructor(props) {
    super(props);
    this.state = { pressed: false };
  }

  handleClick = () => {
    this.setState({ pressed: !this.state.pressed });
  }

  render() {
    const btn = block('btn');
    const btnClassName = applyModifiers(btn, {
      primary: true,
      active: this.state.pressed,
    });

    return (
      <button className={btnClassName} onClick={this.handleClick}>
        <span className={btn('text')}>{this.props.children}</span>
        <span className={btn('icon')}>
          <img className={btn('image')} src={this.props.icon} alt="" />
        </span>
      </button>
    );
  }
}

Applying modifiers

Modifiers can be applied with string, array or object:

import { block, applyModifiers } from 'rbem';

const icon = block('button')('icon');
const bigWhiteIcon = applyModifiers(icon, ['big', 'white']);
// -> 'button__icon button__icon--big button__icon--white'

// black modifier will be added only if condition evaluates to true
const bigMaybeBlackIcon = applyModifiers(icon, {
  black: Math.random() > 0.5,
  big: true,
});
// -> 'button__icon button__icon--big button__icon--black'

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
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial