# bem-cls

> An easy-to-use BEM class name generator

Latest version **0.0.1** (published 2018-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install bem-cls
pnpm add bem-cls
yarn add bem-cls
bun add bem-cls
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2018-07-12 |
| First published | 2018-07-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhuxw |
| Maintainers | zhuxw |
| Keywords | bem, cls, class, className |

## Links

- npm: https://www.npmjs.com/package/bem-cls
- Homepage: https://github.com/zhuxw/bem-cls
- Issues: https://github.com/zhuxw/bem-cls/issues
- npm.io page: https://npm.io/package/bem-cls

## Recent versions

- 0.0.1 (latest) — 2018-07-12

## README

# bem-cls

An easy-to-use BEM class name generator.

# Install

```
npm i -S bem-cls
```

# Usage

```js
var bemcls = require('bem-cls');

var c = bemcls('myblock');

c(); // myblock

c.block; // myblock

c('btn'); // myblock__btn

c('btn', 'required'); // myblock__btn myblock__required

c('btn', false); // myblock__btn

c({ btn: true, required: false }); // myblock__btn

c(['btn', {required: true}]); // myblock__btn myblock__required

c(c.exact('exact-name'), 'btn'); // exact-name myblock__btn

c.exact('exact-name', c.block); // exact-name myblock

```

## Use in React
```js
import bemcls from 'bem-cls';

const c = bemcls('my-comp');

class MyComp extends React.Component {
    render() {
        const { className, hasFooter, contentCollapsed } = this.props;

        return (
            <div className={c.exact(c.block, className)}>
                <div className={c('header')}/>
                <div className={c('content', { 'content-collapsed': contentCollapsed })}/>
                <div className={c(hasFooter && 'footer')}/>
            </div>
        );
    }
}

```

---
_Source: https://npm.io/package/bem-cls · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._