CSS Naming Conventions

CSS naming convention

Below is the naming conventions for HTML structure. 
=====================================================

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.

Block level Eg:
--------------------------
<div class="menu">...</div>

Element Name Eg
--------------------------
<div class="menu">
    ...
    <span class="menu__item"></span>
</div>

Block Modifier
--------------------------
menu_hidden
menu_theme_islands

<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_visible
menu__item_type_radio

<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; }