# @lneedy/saladcss-bem

> webpack 4.0 PostCSS ^7.0.0 plugin implementing BEM as at-rules

Latest version **0.0.4** (published 2019-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @lneedy/saladcss-bem
pnpm add @lneedy/saladcss-bem
yarn add @lneedy/saladcss-bem
bun add @lneedy/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.4 |
| Published | 2019-09-27 |
| First published | 2019-08-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 12.8 KB |
| Known vulnerabilities | 0 (+5 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | lneedy |
| Maintainers | lneedy |
| Keywords | postcss, css, postcss-plugin, bem |

## Links

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

## Dependencies (1)

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

## 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.4 (latest) — 2019-09-27
- 0.0.3 — 2019-09-27
- 0.0.2 — 2019-09-24
- 0.0.1 — 2019-08-12

## README

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

[PostCSS] plugin implementing BEM as at-rules.

```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/@lneedy/saladcss-bem · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._