Getting started

bem-broom builds and parses BEM class names from plain JavaScript objects. It’s a small monorepo:

• @bem-broom/core — the framework-agnostic builder/parser. Zero runtime dependencies.
• @bem-broom/react — React helpers (useBem, withBem) built on top of core.
• @bem-broom/webcomponents — framework-free custom-element helpers (@bem decorator, BemElement mixin).
• @bem-broom/lit — Lit helpers (@bem decorator, BemController).

Install

# Core only
npm install @bem-broom/core

# React helpers (core is a dependency; react is a peer)
npm install @bem-broom/react @bem-broom/core react

# Custom-element helpers (no framework)
npm install @bem-broom/webcomponents @bem-broom/core

# Lit helpers (lit is a peer)
npm install @bem-broom/lit @bem-broom/core lit

Quick example

import { bem } from '@bem-broom/core';

bem({ block: 'card', modifiers: { block: { active: true } } });
// → ['card', 'card--active']

From here:

• Building and parsing class names → the core guide and its API reference.
• Using it in React components → the react guide and its API reference.
• Using it in plain custom elements → the webcomponents guide and its API reference.
• Using it in Lit → the lit guide and its API reference.