PostHTML plugin for support to simplify the maintenance of BEM naming structure in html
$ npm install --save-dev posthtml-bem
##Features
<div block="MadTeaParty">
Mad Tea Party
</div>
This would render like
<div class="MadTeaParty">
Mad Tea Party
</div>
<div block="MadTeaParty">
<div elem="march-hare">March Hare</div>
</div>
This would render like
<div class="MadTeaParty">
<div class="MadTeaParty__march-hare">March Hare</div>
</div>
Attention: Please use "mods" for the attribute modifiers instead of "mod" and a space as a separator of modifiers instead of a comma.
<div block="MadTeaParty">
<div elem="march-hare" mods="type:mad">March Hare</div>
<div elem="march-hare" mods="mad">March Hare</div>
</div>
This would render like
<div class="MadTeaParty">
<div class="MadTeaParty__march-hare MadTeaParty__march-hare_type_mad">
March Hare
</div>
<div class="MadTeaParty__march-hare MadTeaParty__march-hare_mad">
March Hare
</div>
</div>
You can mix block, element or modifiers.
<div block="animal" mix="block:elephant elem:trunk mods:[size:short broken]">
<div elem="nose" mods="size:long">Nose</div>
</div>
This would render like
<div class="animal elephant__trunk elephant__trunk_size_short elephant__trunk_broken">
<div class="animal__nose animal__nose_size_long">Nose</div>
</div>
You can use several mixes separated by a comma.
<div block="animal" mix="block:elephant elem:trunk mods:[size:short broken], block:cow mods:[moo]">
<div elem="nose" mods="size:long">Nose</div>
</div>
This would render like
<div class="animal elephant__trunk elephant__trunk_size_short elephant__trunk_broken cow cow_moo">
<div class="animal__nose animal__nose_size_long">Nose</div>
</div>
Native classes are supplemented by BEM classes
<div block="animal" mix="block: elephant" class="clearfix grid">
<div elem="nose" mods="size: long" class="clearfix grid">Nose</div>
</div>
This would render like
<div class="animal elephant clearfix grid">
<div class="animal__nose animal__nose_size_long clearfix grid">Nose</div>
</div>
var posthtml = require('posthtml'),
config = {
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '--'
},
html = '<div block="mad-tea-party"><div elem="march-hare" mods="type:mad">March Hare</div><div elem="hatter" mods="type:mad">Hatter</div><div elem="dormouse" mods="state:sleepy">Dormouse</div></div>';
posthtml()
.use(require('posthtml-bem')(config))
.process(html)
.then(function (result) {
console.log(result.html);
});
var gulp = require('gulp'),
rename = require('gulp-rename'),
posthtml = require('gulp-posthtml');
gulp.task('default', function () {
return gulp.src('before.html')
.pipe(posthtml([
require('posthtml-bem')({
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '--'
})
]))
.pipe(rename('after.html'))
.pipe(gulp.dest('.'));
});
jade template
div(block='animals')
div(elem='rabbit' mods='type:scurrying color:white')
div(elem='dormouse' mods='type:sleeper color:red')
guplfile.js
var gulp = require('gulp'),
jade = require('gulp-jade'),
rename = require('gulp-rename'),
posthtml = require('gulp-posthtml');
gulp.task('default', function () {
return gulp.src('before.jade')
.pipe(jade({
pretty: true
}))
.pipe(posthtml([
require('posthtml-bem')({
elemPrefix: '__',
modPrefix: '_',
modDlmtr: '--'
})
]))
.pipe(rename('after.html'))
.pipe(gulp.dest('.'));
});
This plugin was inspired by the syntax and the idea of using custom attributes from BEML and bemto.
MIT