Ошибки при написании БЭМ CSS
Разработка программного обеспечения — командная работа
При разработке программного обеспечения очень важно согласовать принципы, технологии и методологии. Эти соглашения должны быть результатом обсуждений, доказательств концепций, знаний, а иногда и голосований. Необходимо приглашать к участию всю команду, потому что разработка программного обеспечения — это командная работа.
Мы разделились на несколько команд. Одна команда согласилась использовать Методологию БЭМ (BEM), а другая — Tailwind CSS. Считаю, что важно договориться о том или ином способе, хотя для успеха клиентских проектов подходят оба варианта.
Одно можно сказать наверняка. Если вы не договоритесь, всё пойдёт наперекосяк. Я был в такой ситуации.
Изучите правильный БЭМ CSS
Время от времени к нашей команде присоединяются новые коллеги. Некоторые из них раньше не слышали о методологии БЭМ CSS. Поэтому им приходится его изучать, и, естественно, случаются ошибки. Ошибки — это вовсе не проблема. Они часть процесса обучения.
Четыре распространённые ошибки БЭМ
Чтобы облегчить освоение правильного БЭМ, я записал несколько распространённых ошибок, встречающихся в повседневной работе.
1. Неправильно вложенные блоки и элементы
В методологии БЭМ CSS не допускается вложение блоков. Если начинаете новый блок, не разрешается использовать элементы из другого блока.
❌ Неправильно
<article class="card">
<header class="header">
<h2 class="card__headline"></h2>
</header>
</article>✅ Правильно
<article class="card">
<header class="card__header">
<h2 class="card__headline"></h2>
</header>
</article>2. Правнуки
В БЭМ CSS нет ни внуков, ни правнуков. Вместо них можно использовать обычные
элементы блока.
❌ Неправильно
<article class="card">
<header class="card__header">
<h2 class="card__header__headline"></h2>
</header>
</article>✅ Правильно
<article class="card">
<header class="card__header">
<h2 class="card__headline"></h2>
</header>
</article>3. Модификаторы без базового класса
Модификаторы не могут существовать без базового блока или элемента.
❌ Неправильно
<article class="card--highlight">
<header class="card__header"></header>
</article>✅ Правильно
<article class="card card--highlight">
<header class="card__header"></header>
</article>❌ Неправильно
<article class="card">
<header class="card__header--important"></header>
</article>✅ Правильно
<article class="card">
<header class="card__header card__header--important"></header>
</article>4. Слишком большие блоки
Не стоит создавать очень большие блоки. Идея методологии БЭМ заключается в создании модульных и многократно используемых блоков.
❌ Неправильно
<body class="body">
<header class="body__header"></header>
<main class="body__main"></main>
<footer class="body__footer"></footer>
</body>✅ Правильно
<body class="body">
<header class="header"></header>
<main class="main"></main>
<footer class="footer"></footer>
</body>Как автоматизировать проверку БЭМ
Иногда в БЭМ CSS трудно найти ошибки вручную. Недавно я узнал, что существует BEM linter.