https://github.com/jahed/bem

Functions for using BEM naming conventions in CSS and CSS Modules and applying them seamlessly in JavaScript.
https://github.com/jahed/bem

bem css css-modules javascript react

Last synced: 14 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/jahed/bem
• Owner: jahed
• License: mit
• Created: 2018-02-09T12:07:05.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-08-19T20:49:24.000Z (about 3 years ago)
• Last Synced: 2024-10-10T18:33:54.514Z (27 days ago)
• Topics: bem, css, css-modules, javascript, react
• Language: TypeScript
• Homepage:
• Size: 305 KB
• Stars: 8
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @jahed/bem

[![npm](https://img.shields.io/npm/v/@jahed/bem.svg)](https://www.npmjs.com/package/@jahed/bem)

[![author](https://img.shields.io/badge/author-jahed-%23007fff)](https://jahed.dev/)

Functions for using BEM in CSS and CSS Modules.

- [Using CSS Modules with BEM](https://jahed.dev/2018/02/09/using-css-modules-with-bem/)

- [@jahed/bem, A Brief History](https://jahed.dev/2018/02/09/jahed-bem-a-brief-history/)

## Installation

```bash

# NPM

npm install @jahed/bem

# Yarn

yarn add @jahed/bem

```

## Usage

```js

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.

```js

import { bemModule } from '@jahed/bem'

import styles from 'styles.module.css'

const 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](https://jahed.github.io/bem/).

**`bem(block: string, modifiers: object): string`**

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

[Examples](src/bemModule.test.ts)

---

**`bemModule(cssModuleLocals): bem`**

Generates a `bem`-compliant function which maps the resulting class names to the given

`cssModuleLocals` map.

[Examples](src/bemModule.test.ts)

---

**`join(...string): string`**

Joins the given `string`s with a whitespace (` `), filtering any falsy

values (such as `undefined`, `null`, `false`, `''`).

[Examples](src/join.test.ts)

---

## License

[MIT](LICENSE)