Основные ошибки при написании CSS с БЭМ

Источник: «Common mistakes when writing CSS with BEM»
При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований.

Разработка программного обеспечения это командные усилия

При разработке программного обеспечения важно согласовывать общий курс, технологии и методологии. Эти соглашения должны быть результатом обсуждений, знаний, а иногда голосований. К участию следует приглашать всю команду, потому что разработка программного обеспечения — это командные усилия и всем нравится вовлечённые члены команды.

В 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>

Автоматизация

Иногда сложно найти ошибку вручную. Вчера я узнал, что существует БЭМ линтер. Я изучу его.

Похожие статьи

Дополнительные материалы

Следующая Статья

JavaScript vs. TypeScript