Распространенные ошибки при написании CSS с помощью БЭМ
В visuellverstehen мы разделены на несколько команд. Некоторые команды согласились использовать Блок-элемент-модификатор (BEM), а другие команды согласились использовать Tailwind CSS. Я думаю, что очень важно договориться о том или ином пути, хотя оба способа полностью подходят для достижения успеха.
Одно можно сказать точно. Если у вас нет согласованности, то разработка превратится в беспорядок. Время от времени к нашей команде присоединяются новые коллеги. Некоторые из них никогда раньше не слышали о BEM. Поэтому они должны учиться, и, естественно, будут происходить некоторые ошибки. Ошибки вообще не проблема. Они являются частью процесса обучения.
Четыре самых распространенных ошибки
Содержание статьи:
Чтобы помочь вам выучить BEM, я записал некоторые из наиболее частых ошибок, которые я встречаю в повседневной работе.
1. Неправильно вложенные блоки и элементы
Вложение блоков не допускается. Если вы начинаете новый блок, вам не разрешается использовать элементы из другого блока.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Неправильно
<article class=”card”> <header class=”header”> <h2 class=”card__headline”></h2> </header> </article>
| 12345 | <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>
| 12345 | <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>
| 12345 | <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>
| 12345 | <article class=”card”> <header class=”card__header”> <h2 class=”card__headline”></h2> </header></article> |
3. Модификаторы без базового класса
Модификаторы не могут существовать без базового блока или элемента.
Неправильно
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
<article class=”card–highlight”> <header class=”card__header”></header> </article>
| 123 | <article class=”card–highlight”> <header class=”card__header”></header></article> |
Правильно
<article class=”card card–highlight”> <header class=”card__header”></header> </article>
| 123 | <article class=”card card–highlight”> <header class=”card__header”></header></article> |
Неправильно
<article class=”card”> <header class=”card__header–important”></header> </article>
| 123 | <article class=”card”> <header class=”card__header–important”></header></article> |
Правильно
<article class=”card”> <header class=”card__header card__header–important”></header> </article>
| 123 | <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>
| 12345 | <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>
| 12345 | <body class=”body”> <header class=”header”></header> <main class=”main”></main> <footer class=”footer”></footer></body> |
Автоматизация
Иногда бывает сложно найти ошибки вручную. Вчера узнал, что есть BEМ linter. Буду смотреть как с ним работать.
Автор: Malte Riechmann
Источник: webformyself.com