ru	Решение распространенных проблем веб-разработки с помощью БЭМ
uk	Рішення типових проблем веб-розробки з допомогою БЕМ

ru	Методология БЭМ задает правила по именованию CSS-селекторов../naming-convention/naming-convention.ru.md, соблюдение которых решает ряд проблем веб-разработки и отвечает на следующие вопросы:
uk	Методологія БЕМ задає [правила іменування CSS селекторів](../naming-convention/naming-convention.ru.md), дотримання яких вирішує ряд проблем веб-розробки і відповідає на наступні питання:

ru	Как упростить код и облегчить рефакторинг#Как-упростить-код-и-облегчить-рефакторинг
uk	[Як спростити код і полегшити рефакторинг](#Як-спростити-код-і-полегшити-рефакторинг)

ru	Как получить самодокументируемый код#Как-получить-самодокументируемый-код
uk	[Як отримати самодокументируемый код](#Як-отримати-самодокументируемый-код)

ru	Как начать повторно использовать код и избежать взаимного влияния компонентов друг на друга#Как-начать-повторно-использовать-код-и-избежать-взаимного-влияния-компонентов-друг-на-друга
uk	[Як почати повторно використовувати код і уникнути взаємного впливу компонентів один на одного](#Як-почати-повторно-використовувати-код-і-уникнути взаємного впливу-компонентів-один-на-одного)

ru	Как разместить несколько сущностей на одном DOM-узле и избежать «Copy-Paste»#Как-разместить-несколько-сущностей-на-одном-dom-узле-и-избежать-copy-paste
uk	[Як розмістити кілька сутностей на одному DOM-вузлі і уникнути «Copy-Paste»](#Як-the-кілька-сутностей-на-одному-dom-сайті-і-уникнути-copy-paste)

ru	Как упростить код и облегчить рефакторинг
uk	Як спростити код і полегшити рефакторинг

ru	Проблема
uk	**Проблема**

ru	При верстке проекта компоненты интерфейса получают имена на основе контекста, с которым работает разработчик.
uk	При верстці проекту компоненти інтерфейсу отримують імена на основі контексту, з яким працює розробник.

ru	Обычно контекстом служит страница или какая-то ее часть.
uk	Зазвичай контекстом служить сторінка або якась її частина.

ru	Когда страницу верстает один разработчик в короткие сроки, коллизии имен можно избежать.
uk	Коли сторінку верстає один розробник в короткі терміни, колізії імен можна уникнути.

ru	Но если над проектом работают несколько человек или правки нужно внести спустя какое-то время, то отследить зависимые имена компонентов становится сложно.
uk	Але якщо над проектом працюють кілька осіб або правки потрібно внести через якийсь час, то відстежити залежні імена компонентів стає складно.

ru	В больших проектах результатом правки одного класса может стать десяток «разъехавшихся» страниц.
uk	У великих проектах результатом правки одного класу може стати десяток «роз'їхалися» сторінок.

ru	Например, для создания навигационного меню могут использоваться следующие имена классов:
uk	Наприклад, для створення навігаційного меню можуть використовуватися такі імена класів:

ru	<ul class="nav"> <li class="item active"><a class="link">One</a></li> <li class="item"><a class="link">Two</a></li> <li class="item"><a class="link">Three</a></li> </ul>

ru	К ним могут быть написаны CSS-правила:
uk	До них можуть бути написані CSS-правил:

ru	Если понадобится добавить на страницу другой компонент, содержащий пункты, то стили для нового item повлияют на пункты из существующего навигационного меню.
uk	Якщо знадобиться додати на сторінку інший компонент, що містить пункти, стилі для нового `item` вплинуть на пункти з існуючого навігаційного меню.

ru	Или предположим, что в навигационном меню нужно изменить правила класса .active.
uk	Або припустимо, що в навігаційному меню потрібно змінити правила класу `.active`.

ru	По имени непонятно, какие компоненты его используют.
uk	По імені незрозуміло компоненти, які його використовують.

ru	Может оказаться, что на другой странице существует, например, кнопка <div class="button active">Нажми меня!</div>.
uk	Може виявитися, що на іншій сторінці існує, наприклад, кнопка `<div class="button active">Натисни мене!</div>`.

ru	Тогда изменение правил для .active повлияет на стили этой кнопки.
uk	Тоді зміна правил для `.active` вплине на стилі цієї кнопки.

ru	Чтобы разобраться, можно ли безболезненно изменить стили для класса .active, разработчику придется просмотреть всю структуру страницы или проекта.
uk	Щоб розібратися, чи можна безболісно змінити стилі для класу `.active`, розробнику доведеться переглянути всю структуру сторінки або проекту.

ru	Любое изменение потребует значительных временных затрат только на поиск зависимых компонентов.
uk	Будь-яка зміна потребуватиме значних часових витрат тільки на пошук залежних компонентів.

ru	Решение
uk	**Рішення**

ru	Методология БЭМ решает проблему коллизии имен при помощи соглашения по именованию CSS-классов../naming-convention/naming-convention.ru.md#Соглашение-по-именованию-css-селекторов, предоставляя всем компонентам и их составляющим уникальные имена.
uk	Методологія БЕМ вирішує проблему колізії імен за допомогою [угоди щодо іменування CSS-класів](../naming-convention/naming-convention.ru.md#Угода-по-іменування-css селекторів), надаючи всім компонентів та їх складових унікальні імена.

ru	Применение правил по именованию позволяет:
uk	Застосування правил іменування дозволяє:

ru	задавать уникальные имена БЭМ-сущностям../key-concepts/key-concepts.ru.md#БЭМ-сущность;
uk	задавати унікальні імена [БЕМ-сутностей](../key-concepts/key-concepts.ru.md#БЕМ-сутність);

ru	отслеживать иерархические связи в пределах блока;
uk	відстежувати ієрархічні зв'язки в межах блоку;

ru	упрощать восприятие кода;
uk	спрощувати сприйняття коду;

ru	получать самодокументируемый код#Как-получить-самодокументируемый-код.
uk	отримувати [самодокументируемый код](#Як-отримати-самодокументируемый-код).

ru	Рассмотрим тот же пример навигационного меню:
uk	Розглянемо той же приклад навігаційного меню:

ru	<ul class="nav"> <li class="item active"><a class="link">One</a></li> <li class="item"><a class="link">Two</a></li> <li class="item"><a class="link">Three</a></li> </ul>

ru	Но применим к нему правила именования БЭМ: класс nav будет обозначать имя блока, nav__item и nav__link — имена элементов, а nav__item_active — имя модификатора элемента item.
uk	Але застосуємо до нього правила іменування БЕМ: клас `nav` буде позначати ім'я блоку, `nav__item` і `nav__link` — імена елементів, а `nav__item_active` — ім'я модифікатора елемента `item`.

ru	В таком случае запись будет следующей:
uk	У такому випадку запис буде наступною:

ru	<ul class="nav"> <li class="nav__item nav__item_active"><a class="nav__link">One</a></li> <li class="nav__item"><a class="nav__link">Two</a></li> <li class="nav__item"><a class="nav__link">Three</a></li> </ul>

ru	И, соответственно, CSS будет иметь такой вид:
uk	І, відповідно, CSS буде мати такий вигляд:

ru	Новые имена CSS-классов содержат всю информацию о структуре блока.
uk	Нові імена CSS-класів містять всю інформацію про структуру блоку.

ru	А это значит, что больше не нужно просматривать HTML-код страницы, чтобы определить все зависимости.
uk	А це значить, що більше не потрібно переглядати HTML-код сторінки, щоб визначити всі залежності.

ru	Cелектор всегда содержит знания о том, на какой блок или элемент влияют его правила (в данном случае на элемент nav__item).
uk	Селектор завжди містить знання про те, на який блок або елемент впливають його правила (в даному випадку на елемент `nav__item`).

ru	Разработчику не придется думать о возможном существовании кнопки <div class="button active">Нажми меня!</div>, так как еe CSS-правила будут записаны как .button_active и не будут зависеть от правил модификатора active для пункта меню (nav__item_active).
uk	Розробникам не доведеться думати про можливе існування кнопки `<div class="button active">Натисни мене!</div>`, так як її CSS-правила будуть записані як `.button_active` і не будуть залежати від правил модифікатора `active` для пункту меню (`nav__item_active`).

ru	Использование длинных имен имеет следующие недостатки:
uk	Використання довгих імен має наступні недоліки:

ru	Результирующий код весит больше.
uk	Результуючий код важить більше.

ru	Эта проблема решается gzip, который сжимает повторяющиеся последовательности в именах.
uk	Ця проблема вирішується `gzip`, який стискає повторювані послідовності в іменах.

ru	Времени на написание классов тратится больше.
uk	Часу на написання класів витрачається більше.

ru	Эту проблему помогают решить автозаполнение в редакторе, использование CSS-препроцессоров и шаблонизаторов, которые автоматически добавляют префиксы.
uk	Цю проблему допомагають вирішити автозаповнення в редакторі, використання CSS препроцесорів і шаблонизаторов, які автоматично додають префікси.

ru	Длинные имена классов предоставляют явные связи между составными частями компонентов, что экономит время на изучение архитектуры проекта.
uk	Довгі імена класів надають явні зв'язки між складовими частинами компонентів, що економить час на вивчення архітектури проекту.

ru	Как получить самодокументируемый код
uk	Як отримати самодокументируемый код

ru	Проблема
uk	**Проблема**

ru	При переходе на новый проект разработчик тратит много усилий на то, чтобы понять, как все устроено, где что лежит и как работает код.
uk	При переході на новий проект розробник витрачає багато зусиль на те, щоб зрозуміти, як все влаштовано, де що лежить і як працює код.

ru	Порой именно на такое изучение уходит большая часть времени, а вовсе не на реализацию функциональности или исправление ошибки.
uk	Часом саме на таке вивчення йде велика частина часу, а зовсім не на реалізацію функціональності або виправлення помилки.

ru	Решение
uk	**Рішення**

ru	Одна из целей БЭМ — дать понять, что делает тот или иной код, только по названиям классов.
uk	Одна з цілей БЕМ — дати зрозуміти, що робить той чи інший код, тільки за назвами класів.

ru	Идея самодокументируемого кода заключается в том, чтобы при просмотре CSS-классов, переменных и функций было понятно, как работает код, и как взаимодействуют компоненты интерфейса.
uk	Ідея самодокументируемого коду полягає в тому, щоб при перегляді CSS-класів, змінних і функцій було зрозуміло, як працює код, і як взаємодіють компоненти інтерфейсу.

ru	Используя БЭМ, можно получить HTML с именами классов, показывающих взаимодействие следующих частей кода:
uk	Використовуючи БЕМ, можна отримати HTML з іменами класів, показують взаємодію таких частин коду:

ru	независимых блоков../key-concepts/key-concepts.ru.md#Блок;
uk	незалежних [блоків](../key-concepts/key-concepts.ru.md#Блок);

ru	элементов../key-concepts/key-concepts.ru.md#Элемент (дочерних компонентов) этого блока;
uk	[елементів](../key-concepts/key-concepts.ru.md#Елемент) (дочірніх компонентів) цього блоку;

ru	модификаторов../key-concepts/key-concepts.ru.md#Модификатор блока или элемента.
uk	[модифікаторів](../key-concepts/key-concepts.ru.md#Модифікатор) блоку або елемента.

ru	Рассмотрим пример с формой поиска на сайте.
uk	Розглянемо приклад з формою пошуку на сайті.

ru	Не будем обращаться к HTML, попытаемся прочитать только CSS и понять, какую часть интерфейса он описывает.
uk	Не будемо звертатися до HTML, спробуємо прочитати тільки CSS і зрозуміти, яку частину інтерфейсу він описує.

ru	Вариант реализации формы в классической верстке:
uk	Варіант реалізації форми в класичній верстання:

ru	Такой способ записи не отражает связи между:
uk	Такий спосіб запису не відображає зв'язок між:

ru	компонентами и их составными частями;
uk	компонентами та їх складовими частинами;

ru	селекторами и конкретными компонентами интерфейса, к которым они относятся.
uk	селекторами і конкретними компонентами інтерфейсу, до яких вони відносяться.

ru	Использование глобальных селекторов делает код проекта нерасширяемым, так как внесение минимальных изменений повлечет за собой правки во всех зависимых правилах.
uk	Використання глобальних селекторів робить код проекту нерасширяемым, так як внесення мінімальних змін спричинить за собою виправлення у всіх залежних правилах.

ru	Напишем CSS на классы:
uk	Напишемо CSS на класи:

ru	Код стал информативнее: теперь понятно, что есть форма, поле и какой-то компонент submit.
uk	Код став інформації: тепер зрозуміло, що є форма, поле і якийсь компонент `submit`.

ru	Но такие имена все еще не дают понять, относится ли поле (field) к форме (form), или что произойдет, если полей или форм на странице будет несколько.
uk	Але такі імена все ще не дають зрозуміти, чи відноситься поле (`field`) до формі (`form`), або що станеться, якщо полів або форм на сторінці буде кілька.

ru	Снова возникает необходимость обращаться к HTML.
uk	Знову виникає необхідність звертатися до HTML.

ru	Перепишем пример, используя соглашение по именованию БЭМ../naming-convention/naming-convention.ru.md:
uk	Перепишемо приклад, використовуючи [угода щодо іменування БЕМ](../naming-convention/naming-convention.ru.md):

ru	Такая запись дает понять, как работает данный код.
uk	Такий запис дає зрозуміти, як працює даний код.

ru	Имена CSS-классов показывают, что:
uk	Імена CSS-класів показують, що:

ru	Существует форма, реализованная блоком form.
uk	Існує форма, реалізована блоком `form`.

ru	Модификатор form_search указывает на то, что речь идет о форме поиска.
uk	Модифікатор `form_search` вказує на те, що мова йде про форму пошуку.

ru	У формы есть составляющие — вложенные элементы: поле form__field и кнопка form__submit-button.
uk	У форми є складові — вкладені елементи: поле `form__field` кнопка `form__submit-button`.

ru	Следование соглашению по именованию БЭМ позволяет понять структуру блока без подробного изучения HTML.
uk	Дотримання угоди щодо іменування БЕМ дозволяє зрозуміти структуру блоку без докладного вивчення HTML.

ru	Даже при появлении на странице еще одного поля (кроме form__field), его правила никак не будут влиять на элементы поисковой формы.
uk	Навіть при появі на сторінці ще одного поля (крім `form__field`), його правила ніяк не будуть впливати на елементи пошукової форми.

ru	Новое поле будет реализовано как элемент другого блока и будет иметь свое уникальное имя.
uk	Нове поле буде реалізовано як елемент іншого блоку і буде мати своє унікальне ім'я.

ru	Например, attach__field.
uk	Наприклад, `attach__field`.

ru	Правила именования БЭМ позволяют сделать код проекта однозначным и, как следствие, информативным.
uk	Правила іменування БЕМ дозволяють зробити код проекту однозначним і, як наслідок, інформативним.

ru	Это снижает порог входа для других разработчиков.
uk	Це знижує поріг входу для інших розробників.

ru	Как начать повторно использовать код и избежать взаимного влияния компонентов друг на друга
uk	Як почати повторно використовувати код і уникнути взаємного впливу компонентів один на одного

ru	Проблема
uk	**Проблема**

ru	Разработчик использует схожий набор компонентов при разработке страниц одного проекта.
uk	Розробник використовує схожий набір компонентів при розробці сторінок одного проекту.

ru	Например, на странице может быть несколько типов блока menu.
uk	Наприклад, на сторінці може бути кілька типів блоку `menu`.

ru	Рассмотрим проблему на примере навигационного меню:
uk	Розглянемо проблему на прикладі навігаційного меню:

ru	<ul class="nav"> <li class="item"><a class="link">One</a></li> <li class="item"><a class="link">Two</a></li> <li class="item"><a class="link">Three</a></li> </ul>

ru	CSS-стили к пункту item могут быть записаны как:
uk	CSS-стилі до пункту `item` можуть бути записані як:

ru	Если на страницу понадобится добавить дополнительные компоненты, содержащие пункты, то появится еще один блок кода с классом item, например:
uk	Якщо на сторінку знадобиться додати додаткові компоненти, що містять пункти, то з'явиться ще один блок коду з класом `item`, наприклад:

ru	<div class="snippets"> <div class="item"> <h2 class="title"></h2> <img class="thumb"> </div> </div>

ru	В этом случае CSS может быть оформлен с помощью каскадов.
uk	У цьому випадку CSS може бути оформлений за допомогою каскадів.

ru	Для этого достаточно доопределить правила, уже написанные для .item:
uk	Для цього достатньо довизначити правила, вже написані для `.item`:

ru	Подобный код может работать до тех пор, пока не возникнет необходимость изменить страницу.
uk	Такий код може працювати до тих пір, поки не виникне необхідність змінити сторінку.

ru	Например, переместить пункты меню, использовать написанный код в другом месте отдельно от родительского компонента или вложить навигационное меню в блок snippets.
uk	Наприклад, перемістити пункти меню, використовувати написаний код у іншому місці окремо від батьківського компонента або вкласти навігаційне меню в блок `snippets`.

ru	Использование каскадов связывает независимые компоненты интерфейса: нет возможности исправить один компонент, не затронув стили другого.
uk	Використання каскадів пов'язує незалежні компоненти інтерфейсу: немає можливості виправити один компонент, не торкнувшись стилі іншого.

ru	Решение
uk	**Рішення**

ru	Правила по именованию CSS-селекторов../naming-convention/naming-convention.ru.md дают возможность вносить изменения точечно, не затрагивая зависимые компоненты.
uk	[Правила іменування CSS селекторів](../naming-convention/naming-convention.ru.md) дають можливість вносити зміни точково, не зачіпаючи залежні компоненти.

ru	В БЭМ каждый блок имеет уникальное имя и является самодостаточным.
uk	У БЕМ кожен блок має унікальне ім'я і є самодостатнім.

ru	Запишем тот же код в соответствии с правилами именования БЭМ:
uk	Запишемо той же код згідно з правилами іменування БЕМ:

ru	<ul class="nav"> <li class="nav__item"><a class="nav__link">One</a></li> <li class="nav__item"><a class="nav__link">Two</a></li> <li class="nav__item"><a class="nav__link">Three</a></li> </ul>

ru	В таком случае добавление нового пункта item на страницу будет выглядеть так:
uk	У такому разі додавання нового пункту `item` на сторінку буде виглядати так:

ru	<div class="snippets"> <div class="snippets__item"> <h2 class="snippets__title"></h2> <img class="snippets__thumb"> </div> </div>

ru	Пункт snippets__item будет иметь соответствующие только ему уникальные CSS-правила:
uk	Пункт `snippets__item` буде мати відповідні тільки йому унікальні CSS-правил:

ru	Изменения в nav__item не влияют на snippets__item, так как пункты получают уникальные имена благодаря пространству именhttps://ru.wikipedia.org/wiki/Пространство_имён_%28программирование%29, заданному именем блока.
uk	Зміни в `nav__item` не впливають на `snippets__item`, так як пункти отримують унікальні імена завдяки [простору імен](https://ru.wikipedia.org/wiki/Пространство_имен_%28программирование%29), заданим ім'ям блоку.

ru	Это позволяет формировать независимые CSS-правила для всех элементов блока.
uk	Це дозволяє формувати незалежні CSS-правила для всіх елементів блоку.

ru	Такой подход дает возможность защитить элементы от взаимного влияния друг на друга — элементы всегда являются частью блока.
uk	Такий підхід дає можливість захистити елементи від взаємного впливу один на одного — елементи завжди є частиною блоку.

ru	Такой же принцип работы использует и Shadow DOM в Web Components.
uk	Такий же принцип роботи використовує і Shadow DOM в Web Components.

ru	Но, в отличие от Shadow DOM, применение соглашения по именованию БЭМ не зависит от совместимости с работой браузеров.
uk	Але, на відміну від Shadow DOM, застосування угоди щодо іменування БЕМ не залежить від сумісності з роботою браузерів.

ru	Блоки snippets и nav можно повторно использовать и перемещать по странице или проекту.
uk	Блоки `snippets` і `nav` можна повторно використовувати і переміщати по сторінці або проектом.

ru	Уникальность имен классов, основанная на правилах именования БЭМ, позволяет блокам не зависеть друг от друга.
uk	Унікальність імен класів, заснована на правилах іменування БЕМ, дозволяє блокам не залежати один від одного.

ru	Использование каскадов в БЭМ
uk	Використання каскадів у БЕМ

ru	Методология БЭМ допускает использование каскадов.
uk	Методологія БЕМ допускає використання каскадів.

ru	Например, каскад уместен, чтобы менять элементы в зависимости от состояния блока или заданной ему темы:
uk	Наприклад, каскад доречний, щоб змінювати елементи в залежності від стану блоку або заданої йому теми:

ru	Важно! Применение каскада увеличивает связанность кода и делает его повторное использование невозможным.
uk	**Важливо!** Застосування каскаду збільшує зв'язаність коду і робить його повторне використання неможливим.

ru	Как разместить несколько сущностей на одном DOM-узле и избежать «Copy-Paste»
uk	Як розмістити кілька сутностей на одному DOM-вузлі і уникнути «Copy-Paste»

ru	Проблема
uk	**Проблема**

ru	При работе с проектами может потребоваться повторно использовать реализованную функциональность.
uk	При роботі з проектами може знадобитися повторно використовувати реалізовану функціональність.

ru	Во многих случаях такую проблему решают копированием нужной части кода в новый компонент.
uk	У багатьох випадках таку проблему вирішують копіюванням потрібної частини коду в новий компонент.

ru	Такой подход имеет следующие недостатки:
uk	Такий підхід має наступні недоліки:

ru	увеличивается кодовая база проекта;
uk	збільшується кодова база проекту;

ru	затрудняется отладка кода при выявлении ошибки.
uk	може налагодження коду при виявленні помилки.

ru	Как следствие, разработчик вынужден поддерживать большее количество строк кода, а исправления необходимо вносить отдельно в каждую реализацию.
uk	Як наслідок, розробник змушений підтримувати більшу кількість рядків коду, а виправлення треба вносити окремо в кожну реалізацію.

ru	Это увеличивает временные затраты на отладку и поддержку проекта.
uk	Це збільшує часові витрати на налагодження і підтримку проекту.

ru	Решение
uk	**Рішення**

ru	Воспользуемся примером, который реализует универсальный блок навигационного меню и написан по всем правилам именования БЭМ../naming-convention/naming-convention.ru.md.
uk	Скористаємося прикладом, який реалізує універсальний блок навігаційного меню та написаний за всіма [правилами іменування БЕМ](../naming-convention/naming-convention.ru.md).

ru	<ul class="nav"> <li class="nav__item"><a class="nav__link">One</a></li> <li class="nav__item"><a class="nav__link">Two</a></li> <li class="nav__item"><a class="nav__link">Three</a></li> </ul>

ru	Такой блок можно использовать, например, для навигации по статьям в блоке новостей.
uk	Такий блок можна використовувати, наприклад, для навігації по статтям в блоці новин.

ru	Допустим, в разделе новостей уже есть блок articles, которому написаны все необходимые CSS-правила.
uk	Припустимо, в розділі новин вже є блок `articles`, якому написані всі необхідні CSS-правила.

ru	Смешать реализации двух разных блоков без копирования кода можно при помощи микса../key-concepts/key-concepts.ru.md#Микс.
uk	Змішати реалізації двох різних блоків без копіювання коду можна за допомогою [міксу](../key-concepts/key-concepts.ru.md#Мікс).

ru	То есть разместить на одном DOM-узле блок nav и элемент articles__nav.
uk	Тобто розмістити на одному DOM-сайті блок `nav` елемент `articles__nav`.

ru	В коде это будет выглядеть так:
uk	У коді це буде виглядати так:

ru	<ul class="nav articles__nav"> <li class="nav__item"><a class="nav__link">One</a></li> <li class="nav__item"><a class="nav__link">Two</a></li> <li class="nav__item"><a class="nav__link">Three</a></li> </ul>

ru	Такая реализация позволит объединить функциональность блока nav и особенности реализации элемента articles__nav (внешний вид новостных статей в меню).
uk	Така реалізація дозволить об'єднати функціональність блоку `nav` і особливості реалізації елемента `articles__nav` (зовнішній вигляд новинних статей в меню).

ru	При этом нет необходимости копировать уже имеющиеся CSS-правила.
uk	При цьому немає необхідності копіювати вже наявні CSS-правила.

ru	При обнаружении ошибки, правки необходимо будет внести только в одну часть кода.
uk	При виявленні помилки, виправлення необхідно буде внести тільки одну частину коду.

ru	Миксовать можно не только блоки с элементами, но и другие БЭМ-сущности.
uk	Міксувати можна не тільки блоки з елементами, але і інші БЕМ-сутності.

ru	Подробнее о вариантах использования миксов в БЭМ читайте в разделе Основные понятия БЭМ../key-concepts/key-concepts.ru.md#Микс.
uk	Детальніше про варіанти використання міксів в БЕМ читайте у розділі [Основні поняття БЕМ](../key-concepts/key-concepts.ru.md#Мікс).