Стоит ли стилизовать элементы при использовании БЭМ или стоит добавить дополнительные классы
Какой подход более уместен при использовании БЭМ? Разрешено ли не добавлять дополнительные классы к элементам и стилизовать сами элементы
<section class = "news-section">
<a>link</a>
</section>
.news-section {
a {
color: blue;
}
}
Или нам нужно добавить дополнительные классы ко всем элементам и стилизовать эти классы?
<section class = "news-section">
<a class = "news-section_link">link</a>
</section>
.news-section {
&_link {
color: blue;
}
}
Ответы 4
Добавьте классы ко всем элементам, чтобы не привязывать стиль ваших компонентов к структуре HTML.
В вашем первом примере new-section__link должен быть элементом привязки, во втором - это может быть элемент любого типа, который является намного более мощным и гибким.
Вам обязательно нужно добавить дополнительные классы к элементам стиля, таким как ссылки. Такая же ситуация, как и при добавлении стилей к кнопкам header__btn или изображениям use-profile__img
Никогда не бывает плохо добавлять дополнительные классы, и они делают код расширяемым в будущем. Представьте себе ситуацию, когда вы хотите добавить больше элементов в этот тег <a>. Вы бы не запрограммировали его так, как этот news-section__a__link-header, верно?
Важный: вы не должны таргетировать элементы на 2 уровня ниже с помощью БЭМ, поскольку это block__element-modifier, а не block__element__element--modifier :)
БЭМ довольно хорошо объяснен здесь
Are we allowed to not add extra classes to elements and style the elements themselves
Нет.
В БЭМ всегда нужно использовать классы CSS:
In HTML, BEM entities are represented by the
classattribute. (bem.info)
Взамен этой жесткости БЭМ принесет вам:
- Масштабируемость, потому что блоки могут быть вложены без ограничений;
- Гибкость, потому что селекторы CSS слабо связаны с тегами HTML.
Чтобы добавить к существующим ответам, да, избегайте использования специфики для стилизации элементов, если это не является абсолютно необходимым (например, контент CMS wysiwyg), поэтому ваш второй блок кода исправляет BEM
Однако в вашем конкретном примере все, что вы устанавливаете, - это цвет, и у вас, вероятно, есть другие элементы, которые вы хотите такого же цвета, верно?
Поэтому мне, вероятно, имеет смысл использовать для этого служебный класс:
<section class = "news-section">
<a class = "u-txt-blue">link</a>
<p class = "news-section__title">...</p>
</section>
.news-section {
...
&__title{
...
}
}
//utilities.scss
.u-txt-blue{
color: blue;
}
Согласитесь с вашим ответом, однако главная статья - плохой пример. Что, черт возьми, это
class=”header__search-from__input”? Я не понимаю, почему люди ссылаются на примеры из всех источников, но не на исходный сайт создателей: en.bem.info/methodology/naming-convention/#naming-rules