Skip to content
BEM-style syntax plugin for PostHTML postprocessor
Branch: master
Clone or download
Latest commit cc06bc3 Jan 12, 2016
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
test
.eslintrc Added main script and configuration files Oct 4, 2015
.gitignore Added main script and configuration files Oct 4, 2015
.jscsrc
.npmignore
.travis.yml
CHANGELOG.md
LICENSE Initial commit Oct 3, 2015
README.md
index.js fixed syntax of code for support node.js 0.12.x, added .travis.yml fo… Oct 27, 2015
package.json

README.md

PostHTML-bem

npm version Build Status

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

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

You can’t perform that action at this time.