ExpandOBem
ExpandOBem is a preprocessing step for HTML that allows you to write BEM-style classes in a shorter, more expressive manner.
ExpandOBem expands abbreviated BEM-style classes, like so:
<div class='post--featured--recent'></div>
Becomes:
<div class='post post--featured post--recent'></div>
The result is cleaner, more readable source HTML and the speedier switching of modifiers.
Install
npm install expandobem
Usage
CLI
Install globally to use the CLI. ExpandOBem accepts an input file, or can use stdin. It'll either write to a file you specify or pipe to stdout.
expandobem input.html -o 'output.html'
Options
--element, -e Element syntax
--modifier, -m Modifier syntax
--outfile, -o Write the ExpandOBem output to this file.
If unspecified, ExpandOBem pipes to stdout.
--help, -h Show help
API
ExpandOBem exposes three methods for processing HTML:
Process File
Read a file and transform it.
expandobem.processFile(path, options)
Process String
Transform a string.
expandobem.processString(string, options)
Process Stream
Transform streaming HTML.
expandobem.processStream(options)
Options
syntax.element (default: __)
The connecting syntax prefixing a block or element.
syntax.modifier (default: --)
The connecting syntax prefixing a modifier.
Test
npm test
Gulp
You can use ExpandOBem directly in a Gulp pipeline using the vinyl-transform plugin and ExpandOBem's processStream function.
var gulp = require('gulp');
var transform = require('vinyl-transform');
var expandobem = require('expandobem');
gulp.src([ '*.html' ])
.pipe(transform(expandobem.processStream))
.pipe(gulp.dest('./build'));