posthtml-bemy

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

This plugin is a different way than respecting posthtml-bem.
I recommend that you examine the difference of the method with posthtml-bem.

Before:

// 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:

<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

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. 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

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

custom prefix

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

License MIT