0.1.3 • Published 7 years ago
posthtml-bemy v0.1.3
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: '___'
}))
....