Naming rules
block_name__element_name--modifier_name-modifier_value
Names are written in lowercase Latin letters.
Words are separated by a underscore (_).
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 double dashes (--).
The modifier value is separated from the modifier name by a single dash (-).
For boolean modifiers, the value is not included in the name (--disabled).
HTML FOR CSS
Positioning a block relative to other blocks
To set a block relative to other blocks,the best approach is usually to use a mix.
HTML implementation
<body class="page">
<header class="header page__header">header</header>
<footer class="footer page__footer">footer</footer>
</body>CSS implementation
.page {color: #000;}
.header {color: #000;}
.footer {color: #000;}
.page__header {color: #000;}
.page__footer {color: #000;}
Positioning elements inside a block
The position of nested HTML elements is usually set by creating an additional block element (for example, block__inner ).
<body class="page">
<div class="page__inner">
<!-- header-->
<header class="header">...</header>
<!-- footer -->
<footer class="footer">...</footer>
</div>
</body>.page__inner {
margin-right: auto;
margin-left: auto;
width: 960px;
}