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

0 4

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

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

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

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

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

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

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

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

Изучите курс и узнайте, как верстать современные сайты на 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. Модификаторы без базового класса

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

Неправильно

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

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

Изучите курс и узнайте, как верстать современные сайты на 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

Оставьте ответ

Ваш электронный адрес не будет опубликован.