BEM generator

It is highly recommended to use the BEM generator instead of adding manually folders and files. It is quicker and more error proof.

By issuing the ./bem.js command at the command line you'll get information how to use this generator.

cs@cs-acer:~/work/ssgg$ ./bem.js 
Usage: bem.js <object> <path> <name>

Commands:
  object  The BEM object to be created. It can be [level, block, element,
          modifier] or [l, b, e, m]
  path    The parent of the BEM object
  name    The name of BEM object to be created inside <path>.

Examples:
  bem.js level components/framework         => "components/framework"
  bem.js block components/framework header  => "components/framework/header/
                                            header.html.swig"
  bem.js element header logo                => "header/__logo/header__logo.html.
                                            swig"
  bem.js modifier header/__logo hover       => "header/__logo/--hover/
                                            header__logo--hover.html.swig"
  bem.js modifier header black              => "header/--black/header--black.
                                            html.swig"

Files generated

There are two files generated: a HTML and and SCSS file. Their extension can be configured in gulp/bem/bem-helpers.js.

Since we are using SWIG for templating the generator creates a .html.swig and an .scss file.

Both the HTML and SCSS files have already added the correct BEM class.

Block

< class="block">
// The HTML generated for a block.

@mixin block {}
// The SCSS generated for a block.

Element

< class="block__element">
// The HTML generated for a block element.

@mixin block__element {}
// The SCSS generated for a block element.

Block Modifier

< class="block--modifier">
// The HTML generated for a block modifier.

@mixin block--modifier {}
// The SCSS generated for a block modifier.

Element Modifier

< class="block__element--modifier">
// The HTML generated for a block element modifier.

@mixin block__element--modifier {}
// The SCSS generated for a block element modifier.

And finally all the files and folders generated for this example:

.
└── block
    ├── block.html.swig
    ├── block.scss
    ├── __element
    │   ├── block__element.html.swig
    │   ├── block__element.scss
    │   └── --modifier
    │       ├── block__element--modifier.html.swig
    │       └── block__element--modifier.scss
    └── --modifier
        ├── block--modifier.html.swig
        └── block--modifier.scss