Awesome

Specifications

This document is used by gulp-bem.

• BEM identifiers
• Directory structure
• Dependencies file

BEM identifiers

We are using conventions, that are described in bem-naming repository.

BEM identifier defines Block, Element, Modificator and Modificator value string representation.

To separate Block name from Element we are using Element delimeter, which by default equals __.

To separate Block name from Modificator, Element from Modificator and Modificator from Modificator value we are using Modificator delimeter, which by default equals _.

Every identifier should contain Block. Element, Modificator and Modificator value can be absent.

Rules defined above describes next string:

Block{Element delimeter}Element{Modificator delimeter}Modificator{Modificator delimeter}Modificator value

Block, Element, Modificator and Modificator value should be strings that fulfill regular expression [a-z0-9]+(?:-[a-z0-9]+)*

Directory structure

We are using conventions, that are described on bem.info site.

BEM methodology does not implies certain directory structure, but for file separation and structuring your application it is advised to store files in predefined way. All files, that are belongs to BEM entity, that has identifier should be placed in directory according to Block, Element and Modificator values.

Directories can be different types (based on nesting):

• Level - top directory with Blocks.
• Block - child directory in Level.
• Element - child directory in Block that starts with Element delimeter.
• Modificator - child directory in Block or Element that starts with Modificator delimeter.

All files for Block should go to Block directory, etc.

Dependencies file

Each directory in directory structure can have dependency file that have next name: {bem}.deps.js.

{bem} is placeholder for BEM identifier.

Those files should contain JavaScript code that exports dependency object (CommonJS style is used).

Dependency object can have next properties:

• require - contains Object or Array of Object
• expect - contains Object or Array of Object

This properties is used to determine order of included dependencies with current block.

require defines dependencies, that should be included before current block.

expect defines dependencies, that should be included after current block.

Object in require and expect is short notation of BEM object that will be normalized with deps-normalize and missing properties (level, block, elem, mod, val) will be taken from current block.

Example:

modules.exports = {
    require: [{block: 'parent'}],
    expect: [{block: 'ancestor'}]
}