# saladcss-bem

> PostCSS plugin implementing BEM as at-rules

Latest version **0.0.2** (published 2017-05-31) · MIT license · 0 weekly downloads

## Install

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

## 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.2 |
| Published | 2017-05-31 |
| First published | 2016-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Malte-Maurice Dreyer |
| Maintainers | baiyaaaaa, youngerheart |
| Keywords | postcss, css, postcss-plugin, bem |

## Links

- npm: https://www.npmjs.com/package/saladcss-bem
- Repository: https://github.com/saladcss/saladcss-bem
- Homepage: https://github.com/saladcss/saladcss-bem#readme
- Issues: https://github.com/saladcss/saladcss-bem/issues
- npm.io page: https://npm.io/package/saladcss-bem

## Dependencies (1)

- [postcss](https://npm.io/package/postcss.md) ^6.0.1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2017-05-31
- 0.0.1 — 2016-05-16

## README

# PostCSS Bem [![Build Status][ci-img]][ci]

[PostCSS] plugin implementing BEM as at-rules.

[PostCSS]: https://github.com/postcss/postcss
[ci-img]:  https://travis-ci.org/ileri/postcss-bem.svg
[ci]:      https://travis-ci.org/ileri/postcss-bem

```css
@utility utilityName {
    color: green;
}

@utility utilityName small {
    color: blue;
}

@component ComponentName {
    color: cyan;

    @modifier modifierName {
        color: yellow;
    }

    @descendent descendentName {
        color: navy;
    }

    @when stateName {
        color: crimson;
    }
}

@component-namespace nmsp {
    @component ComponentName {
        color: red;
    }
}
```

```css
.u-utilityName {
    color: green;
}

.u-sm-utilityName {
    color: blue;
}

.ComponentName {
    color: cyan;
}

.ComponentName--modifierName {
    color: yellow;
}

.ComponentName-descendentName {
    color: navy;
}

.ComponentName.is-stateName {
    color: crimson;
}

.nmsp-ComponentName {
    color: red;
}
```

**With shortcuts**
```css
@b nav { /* b is for block */
    @e item { /* e is for element */
        display: inline-block;
    }
    @m placement_header {
        background-color: red;
    }
}
```

```css
.nav {}
.nav__item {
    display: inline-block
}
.nav_placement_header {
    background-color: red
}
```

## Usage

```js
postcss([ require('postcss-bem')({
    defaultNamespace: undefined, // default namespace to use, none by default
    style: 'suit', // suit or bem, suit by default,
    separators: {
        descendent: '__' // overwrite any default separator for chosen style
    },
    shortcuts: {
        utility: 'util' //override at-rule name
    }
}) ])
```

See [PostCSS] docs for examples for your environment.

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