posthtml-bem

    0.2.2 • Public • Published

    PostHTML-bem

    npm version Build Status

    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

    Install

    npm i posthtml-bem

    DownloadsWeekly Downloads

    20

    Version

    0.2.2

    License

    MIT

    Last publish

    Collaborators

    • rajdee