НАЗВАНИЕ для css-селекторов:

Основные принципы БЭМ:

1. Минимум тегов без классов
2. Каскадность свести к минимуму
3. Блок независим от окружения (может быть размещён в любой части страницы и не сломается при этом).
4. У разных блоков не должно быть общих классов (и в CSS — не группируем общие правила, а копируем их).
5. У одного блока (элемента) может быть несколько модификаторов.
6. Осторожно используем дочерний селектор ( >), последовательность ( +), псевдоклассы ( :nth-child).

1. Имя класса должно отвечать на вопрос «Зачем нужен этот блок?» (а не описывать его внешний вид).
2. Сложные блоки собираем из простых. Только если нужный блок нельзя собрать из уже готовых (или получить модификацией готовых), создаём новый блок.
3. Блок независим от окружения (может быть размещён в любой части страницы и не сломается при этом).
4. У разных блоков не должно быть общих классов (и в CSS — не группируем общие правила, а копируем их). Примеры: «шапка» сайта, кнопка, главная навигация, пагинация, запись в блоге, блок товара в списке товаров.
5. Блоки внутри блоков - обычное дело, селектор у нового блока может не описывать вложенность

1. Это часть блока, которая вне этого блока не имеет смысла и не может быть использована.
2. CSS-класс элемента формируется так: класс-блока__класс-элемента
3. Могут отсутствовать (часть элементов не являются обязательными, в блоке может не быть элементов).
4. Примеры: пункты основной навигации, заголовочная часть записи в блоге, ссылка пагинации. Нет, тольно внутри родителя — это элемент.
5. Частая ошибка: в имени элемента пишут два сегмента __. Не надо так.
6. В БЭМ плоская структура Блок → Элемент, максимально независимая от разметки.

1. Дополнительный класс, изменяющий внешний вид блока (или элемента, если добавлен к элементу).
2. CSS-класс модификатора формируется так: класс-блока--название-модификатора
3. Даёт возможность блокам выглядеть по-разному на разных страницах или в разных частях страницы.
4. Классы-модификаторы не используются без тех классов, которые они модифицируют.
5. <div class="header--big"> — неправильно.
   <div class="header header--big"> — правильно.
6. У одного блока (элемента) может быть несколько модификаторов.
7. Можно модифицировать элементы от модификатора блока (это делает код неочевидным!).
8. Избегайте модифицировать вложенные блоки от модификатора блока-родителя.