# posthtml-bemy

> This plugin improves the tiredness of writing HTML with MindBEMding using the power of posthtml

Latest version **0.1.3** (published 2016-12-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install posthtml-bemy
pnpm add posthtml-bemy
yarn add posthtml-bemy
bun add posthtml-bemy
```

## 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.1.3 |
| Published | 2016-12-10 |
| First published | 2016-12-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4 |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | yoshidax |
| Maintainers | yoshidax |
| Keywords | html, posthtml, posthtml-plugin |

## Links

- npm: https://www.npmjs.com/package/posthtml-bemy
- Repository: https://github.com/yoshidax/posthtml-bemy
- Homepage: https://www.npmjs.com/package/posthtml-bemy
- Issues: https://github.com/yoshidax/posthtml-bemy/issues
- npm.io page: https://npm.io/package/posthtml-bemy

## Dependencies (1)

- [posthtml](https://npm.io/package/posthtml.md) ^0.9.0

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.1.3 (latest) — 2016-12-10
- 0.1.2 — 2016-12-10
- 0.1.1 — 2016-12-04
- 0.1.0 — 2016-12-04

## README

# posthtml-bemy <img align="right" width="220" height="200" title="PostHTML logo" src="http://posthtml.github.io/posthtml/logo.svg">

[![NPM][npm]][npm-url]
[![Deps][deps]][deps-url]
[![Build][build]][build-badge]
[![Standard Code Style][style]][style-url]

[![NPM](https://nodei.co/npm/posthtml-bemy.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/posthtml-bemy/)

This plugin improves the tiredness of writing HTML with [MindBEMding](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/)
 using the power of [posthtml](https://github.com/posthtml/posthtml).

![bemy-demo](./bemy-demo.gif)

 This plugin is a different way than respecting [posthtml-bem](https://github.com/rajdee/posthtml-bem).  
I recommend that you examine the difference of the method with posthtml-bem.

Before:
``` html
// Block appends "_" to the prefix.
// Element appends "__" to the prefix.
// Modifire appends "--" to the prefix.
// Yes!! You don't have to add "Block" to the "Element" or "Modifire" prefix!!
<div class="_block --modifire">
    <div class="__element --modifire">
        <div class="_block-child">
            <div class="__element-1">1</div>
            <div class="__element-2">2</div>
            <div class="__element-3">3</div>
            <div class="something">something</div>
        </div>
    </div>
</div>
```

After:

``` html
<div class="block block--modifire">
    <div class="block__element block__element--modifire">
        <div class="block-child">
            <div class="block-child__element-1">1</div>
            <div class="block-child__element-2">2</div>
            <div class="block-child__element-3">3</div>
            <div class="something">something</div>
        </div>
    </div>
</div>
```

## Install

> npm i posthtml posthtml-bemy

## Usage

``` js
const fs = require('fs');
const posthtml = require('posthtml');
const posthtmlBemy = require('posthtml-bemy');

posthtml()
    .use(posthtmlBemy())
    .process(html/*, options */)
    .then(result => fs.writeFileSync('./after.html', result.html));
```

## Options

| name | description | type | etc |
| --- | --- | --- | --- |
| `prest` | structural css naming style. <br>the block prefix is "`_`". | 'suitecss' | default: 'bem' |
| `blockPrefix` | the prefix of the name representing the `block` in BEM. | string | default: '_' |
| `elementPrefix` | the prefix of the name representing the `element` in BEM. | string | default: '__' |
| `modifirePrefix` | the prefix of the name representing the `modifire` in BEM. | string' | default: '--' |

suitecss prefix

```js
// blockPrefix: "_"
// elementPrefix: "-"
// modifirePrefix: "--"
posthtml()
    .use(posthtmlBemy({ preset: 'suitecss' }))
    ....
```

custom prefix

```js
posthtml()
    .use(posthtmlBemy({
        blockPrefix: '@',
        elementPrefix: '---',
        modifirePrefi: '___'
    }))
    ....
```

### License [MIT](LICENSE)

[npm]: https://badge.fury.io/js/posthtml-bemy.svg
[npm-url]: https://badge.fury.io/js/posthtml-bemy

[deps]: https://david-dm.org/yoshidax/posthtml-bemy.svg
[deps-url]: https://david-dm.org/yoshidax/posthtml-bemy

[style]: https://img.shields.io/badge/code%20style-standard-yellow.svg
[style-url]: http://standardjs.com/

[build]: https://travis-ci.org/posthtml/posthtml.svg?branch=master
[build-badge]: https://travis-ci.org/yoshidax/posthtml-bemy?branch=master

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