Распространенные ошибки при написании CSS с помощью БЭМ

Распространенные ошибки при написании CSS с помощью БЭМ

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

В visuellverstehen мы разделены на несколько команд. Некоторые команды согласились использовать Блок-элемент-модификатор (BEM), а другие команды согласились использовать Tailwind CSS. Я думаю, что очень важно договориться о том или ином пути, хотя оба способа полностью подходят для достижения успеха.

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

Четыре самых распространенных ошибки

Чтобы помочь вам выучить BEM, я записал некоторые из наиболее частых ошибок, которые я встречаю в повседневной работе.

1. Неправильно вложенные блоки и элементы

Вложение блоков не допускается. Если вы начинаете новый блок, вам не разрешается использовать элементы из другого блока.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Неправильно

Правильно

2. Правнуки

В BEМ нет ни внуков, ни правнуков. Вместо этого можно использовать «обычные» элементы блоков.

Неправильно

Правильно

3. Модификаторы без базового класса

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

Неправильно

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Правильно

Неправильно

Правильно

4. Слишком большие блоки

Создавать слишком большие блоки — не лучшая идея. Идея BEM — создание модульных и многоразовых блоков.

Неправильно

Правильно

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

Иногда бывает сложно найти ошибки вручную. Вчера узнал, что есть BEМ linter. Буду смотреть как с ним работать.

Автор: Malte Riechmann

Источник: dev.to

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки:

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

Комментарии Вконтакте:

Комментирование закрыто.