.button .button_size_m .button_theme_islands .button_type_submit // pug
.button__text
<div class="button button_size_m button_theme_islands button_type_submit"> // html
<div class="button__text">...</div>
</div>
// позициоирование блоков относительно друг друга (Используется так называемый МИКС)
<body class="page">
<!-- верхний колонтитул и навигация -->
<header class="header page__header">...</header>
<!-- нижний колонтитул -->
<footer class="footer page__footer">...</footer>
</body>
// и получается что .header и .footer не зависимы друг от друга
.page__header {
padding: 20px;
}
.page__footer {
padding: 50px;
}
<header class="header">
<!--
`header__button` — элемент блока `header`;
`button` — блок;
`button_theme_islands` — модификатор.
-->
<button class="header__button button button_theme_islands">...</button>
</header>
block-name__elem-name_mod-name_mod-val // правила именования
Имена записываются латиницей в нижнем регистре.
Для разделения слов в именах используется дефис (-).
Имя блока задает пространство имен для его элементов и модификаторов.
Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).
Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).
Значение булевых модификаторов в имени не указывается.