Основные ошибки при написании CSS с БЭМ
Разработка программного обеспечения это командные усилия
При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований. К участию следует приглашать всю команду, потому что разработка программного обеспечения — это командные усилия и всем нравится вовлечённые члены команды.
В Visuellverstehen, мы разделены на несколько команд. Часть команды согласились использовать БЭМ методологию, а другая часть команд Tailwind CSS. Я думаю, что очень важно договориться о том или ином решении, когда оба полностью удовлетворяют всем нашим запросам в решении проектов клиентов.
Одно можно сказать точно. Если вы не придёт к согласию, это превратиться в бардак. Я был там.
Изучите правильный БЭМ
Время от времени к нашей команде присоединяются новые коллеги. Некоторые из них никогда раньше не слышали о БЭМ. Поэтому они должны научится и естественно будут появляться некоторые ошибки. Ошибки вообще не проблема. Они часть учебного процесса.
Четыре самых распространённых ошибок БЭМ
Чтобы помочь изучить БЭМ, я привёл ниже не сколько распространённых ошибок, которые я часть наблюдаю в повседневной рабочей жизни.
1. Неправильно вложенные блоки и элементы
В БЭМ не допускается вложение блоков. Если вы начинаете новый блок, то вам не разрешается продолжать использовать элементы из предыдущего блока.
❌ Неправильно
<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. Правнуки
В БЭМ нет ни внуков, ни правнуков. Вместо этого можно использовать обычные
элементы блока.
❌ Неправильно
<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>Автоматизация
Иногда сложно найти ошибку вручную. Вчера я узнал, что существует БЭМ линтер. Я изучу его.