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