03.12.2021

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

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

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

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

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

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

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

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

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

Некорректно

Верно

2. Правнуки

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

Некорректно

Верно

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

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

Некорректно

Верно

Некорректно

Верно

4. Очень большие блоки

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

Некорректно

Верно

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

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *