BEM! BEM!

Install

BemBem

npm install bembem --save-dev

Usage

In order to use absolute include paths with Gulp.js you must add the bembem path into both sass (includePaths) and pug (basedir) options:

webpack 2

webpack.config.js

const bembem = require('bembem');

module.exports = {
    entry: './app.js',
    output: {
        filename: './dist/app.bundle.js',
    },
    devtool: 'source-map',
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "sass-loader", // compiles Sass to CSS
                    options: {
                        includePaths: [bembem.includePaths]
                    }
                }]
            },
            {
                test: /\.pug$/,
                loader: 'pug-loader',
                options: {
                    root: bembem.includePaths
                }
            }
        ]
    }
}

Gulp.js

gulpfile.js

const bembem = require('bembem');

// styles
gulp.task('styles', () => {
    gulp.src('./src/**/*.scss')
        .pipe($.sass({
            includePaths: ['./src', bembem.includePaths] // for absolute includes
        }).on('error', $.sass.logError))
        .pipe(gulp.dest(pathDist));
});

// views
gulp.task('views', () => {
    gulp.src(['!./src/**/_*.pug', './src/**/*.pug'])
        .pipe($.pug({
            basedir: bembem.includePaths // for absolute includes
        }))
        .pipe(gulp.dest(pathDist));
});

Then include mixins into your Sass styles and Pug views:

component.styles.scss

@import "bembem"; // include bembem mixins
// Prefix will be add in ANY class name. This is NOT required
@include prefix("item") {
    @include block("menu") {
        float: left;
        // This modifier only works for the Block "menu"
        @include modifier("right") {
            float: right;
        }
        // The elements are included inside of a Block to have a context
        @include element("item") {
            float: left;
        }
        @include element("button") {
            display: block;
            padding: 10px;
            color: black;
            &:hover {
                background-color: black;
                color: white;
            }
            // This is a modifier of the element "button"
            @include modifier("active") {
                background-color: red;
            }
        }
    }
}

component.view.pug

include /bembem // include bembem mixins

- var $prefix = 'item-'

+bem_scope({prefix: $prefix})
	+block.UL.menu
		+element.LI.item
			+element.A.button(href="#", title="") Button 1
		+element.LI.item
			+element.A.button._active(href="#", title="") Button 2
		+element.LI.item
			+element.A.button(href="#", title="") Button 3

Resources

• BEM: https://en.bem.info/methodology/key-concepts/
• Jade: http://jade-lang.com/
• Sass: http://sass-lang.com/
• Bemto: https://github.com/kizu/bemto

Credits

• Sass Mixins by Giuliano Kranevitter http://github.com/giulianok
• Pug Mixins based on Bemto https://github.com/kizu/bemto