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

0 0

В 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

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