От автора: при разработке программного обеспечения важно согласовать инструкции, технологии и методологии. Эти соглашения должны быть результатом обсуждений, проверки концепций, знаний, а иногда и голосований. К участию следует приглашать всю команду, потому что разработка программного обеспечения — это командная работа.
В visuellverstehen мы разделены на несколько команд. Некоторые команды согласились использовать Блок-элемент-модификатор (BEM), а другие команды согласились использовать Tailwind CSS. Я думаю, что очень важно договориться о том или ином пути, хотя оба способа полностью подходят для достижения успеха.
Одно можно сказать точно. Если у вас нет согласованности, то разработка превратится в беспорядок. Время от времени к нашей команде присоединяются новые коллеги. Некоторые из них никогда раньше не слышали о BEM. Поэтому они должны учиться, и, естественно, будут происходить некоторые ошибки. Ошибки вообще не проблема. Они являются частью процесса обучения.
Четыре самых распространенных ошибки
Чтобы помочь вам выучить BEM, я записал некоторые из наиболее частых ошибок, которые я встречаю в повседневной работе.
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. Правнуки
В BEМ нет ни внуков, ни правнуков. Вместо этого можно использовать «обычные» элементы блоков.
Неправильно
<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. Слишком большие блоки
Создавать слишком большие блоки — не лучшая идея. Идея BEM — создание модульных и многоразовых блоков.
Неправильно
<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>
Автоматизация
Иногда бывает сложно найти ошибки вручную. Вчера узнал, что есть BEМ linter. Буду смотреть как с ним работать.
Автор: Malte Riechmann
Источник: dev.to
Редакция: Команда webformyself.
Читайте нас в Telegram, VK, Яндекс.Дзен