CSS
Philosophy
In the effort of making code maintainable and modular, we use the BEM naming convention for our CSS.
Syntax & Formatting
Syntax and formatting are keys to a maintainable project. By keeping our code style consistent, we not only help ourselves debug faster but we’re also lessening the burden on those who will have to maintain our code (maybe ourselves too!).
BEM Naming rules
block-name__elem-name_mod-name_mod-val
Names are written in lowercase Latin letters.
Words are separated by a hyphen (-).
The block name defines the namespace for its elements and modifiers.
The element name is separated from the block name by a double underscore (__).
The modifier name is separated from the block or element name by a single underscore (_).
The modifier value is separated from the modifier name by a single underscore (_).
For boolean modifiers, the value is not included in the name.
Important:
Elements of elements do not exist in the BEM methodology. The naming rules do not allow creating elements of elements, but you can nest elements inside each other in the DOM tree.
Examples
Examples of the naming rules are applied to CSS.
Block name
menu
HTML
<div class="menu">...</div>
CSS
.menu { color: red; }
Element name
menu__item
Important:
Identical elements in the same block have the same names. For example, all menu items in the menu block are called menu__item.
HTML
<div class="menu">
...
<span class="menu__item"></span>
</div>
CSS
.menu__item { color: red; }
Block modifier name
menu_hiddenmenu_theme_islands
HTML
<div class="menu menu_hidden"> ... </div>
<div class="menu menu_theme_islands"> ... </div>
CSS
.menu_hidden { display: none; }
.menu_theme_islands { color: green; }
Element modifier name
menu__item_visiblemenu__item_type_radio
HTML
<div class="menu">
...
<span class="menu__item menu__item_visible menu__item_type_radio"> ... </span>
</div>
CSS
.menu__item_visible {}
.menu__item_type_radio { color: blue; }