Skip to content

🪛 A stupid simple BEM compose helper to keep your HTML clean.

Notifications You must be signed in to change notification settings

eduardoborges/bemfy

Repository files navigation

bemfy NPM JavaScript Style Guide

A stupid simple BEM compose helper to keep your HTML clean.

  • Works with any library/framework.
  • Add and remove independent class names with truthy or falsy value.
  • Fast!
  • Ridiculously tiny at less 500B.
  • No deps

Install

npm install --save bemfy

Usage

import React from 'react';
import bemfy, { c } from 'bemfy'

const Component = () => {
  const b = bemfy("custom-button");

  return <div className={b('wrapper')}>
    <div className={b('text', 'white')}>The lazy cat jumps over dizzy fox</div>
    <button className={b('button', 'primary')}>Jump!</button>
  </div>
}

export default Component;

This will render:

<div class="custom-button__wrapper">
  <div class="custom-button__text--white">The lazy cat jumps over dizzy fox</div>
  <button class="custom-button__button--primary">Jump!</button>
</div>

License

MIT © Eduardo Borges