Yegoroot
4/8/2018 - 11:09 AM

БЭМ__

БЭМ__

.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 // правила именования
    Имена записываются латиницей в нижнем регистре.
    Для разделения слов в именах используется дефис (-).
    Имя блока задает пространство имен для его элементов и модификаторов.
    Имя элемента отделяется от имени блока двумя подчеркиваниями (__).
    Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).
    Значение модификатора отделяется от имени модификатора одним подчеркиванием (_).
    Значение булевых модификаторов в имени не указывается.