PostHTML-bem

PostHTML plugin for support to simplify the maintenance of BEM naming structure in html

Translate beman templates based on BEM named class structure

Install

$ npm install --save-dev posthtml-bem

Features

Blocks

<div block="MadTeaParty">
    Mad Tea Party
</div>

This would render like

<div class="MadTeaParty">
    Mad Tea Party
</div>

Elements

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

Modifiers

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>

Mixes

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 class support

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>

Usage

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);
    });

With Gulp

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('.'));
});

With Jade and Gulp

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('.'));
});

Predecessors

This plugin was inspired by the syntax and the idea of using custom attributes from BEML and bemto.

License

MIT