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>npm i posthtml posthtml-bemy
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));| 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: '___'
}))
....