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

Основные ошибки при написании 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>

Модификатор без базового блока

Модификаторы не могут существовать без базового блока или элемента.

❌ Неправильно

<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