Опубликовано:

Ошибки при написании БЭМ CSS

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

Разработка программного обеспечения — командная работа

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

Мы в компании мы разделились на несколько команд. Одна команда согласилась использовать Методологию БЭМ (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. Я посмотрю его.

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

JavaScript vs. TypeScript