Comments 22
Я считаю, что двойное нижнее подчеркивание должно появляться только однажды, в имени селектора.
Это очень важное правило, о чем написано в методологии. Т.е. делать элемент элемента вообще нельзя, а не просто не рекомендуется.
По поводу методологии БЭМ как таковой. Да, действительно, она позволяет решать проблемы с модульностью и переносимостью кода на больших и средних проектах.
В то же время она обладает и недостатками. Самый основной из них — это многочисленные классы с длинными названиями. Хорошо, если у класса сравнительно короткое имя c-card, как в примерах в статье, но если это будет какой-то c-front-page-slider или c-contact-information, то список классов у элементов может банально перестать вмещаться в окне редактора (80-120 символов чаще всего). Работать с таким HTML-кодом крайне проблематично, да и выглядит он не очень красиво.
В 9 пункте описано довольно неплохое решение для этой проблемы, можно использовать class^= и class*= и тогда это:
<div class="container container--shopping-cart">
<div class="container__content container__content--special-offer">
<h2 class="container__title">Title</h2>
</div>
</div>можно превратить в это:
<div class="container--shopping-cart">
<div class="container__content--special-offer">
<h2 class="container__title">Title</h2>
</div>
</div>используя вот это:
.container, [class^="container--"], [class*=" container--"] {
border: 1px solid grey;
padding: 10px;
font-family: Arial, sans-serif;
}
.container--shopping-cart {
border: 4px solid orange;
background-color: #eee;
}
Представим, что вы написали блок стилей с селектором в виде .container, [class^=«container--»], [class*=" container--"]. По мере роста проекта какому-то из разработчиков захотелось использовать в селекторе конструкцию container--. И вот тут его ожидает сюрприз: к его стилям стали подмешиваться совершенно чужие правила. Если таких селекторов с классами будет много, то разработка и поддержка такого проекта быстро превратиться в пробежку по минному полю.
Очень хорошая статья. И во многих подходах я пришел примерно к таким же решениям. Пара замечаний
№1
Тоже немного колбасит, когда классы не совсем следуют структуре вложенности. Но я для себя решил что структура элементов должна быть плоской. Иногда по коду получается что block__elem2 вложен в block_elem1, но с этим можно жить и достаточно просто разобраться, потому что компоненты изолированы
№2
Не использую c-, l- префиксы. На мой взгляд это избыточно и немного мусорно. И последнее время все меньше использую хелперы, предпочитаю вставлять миксины.
№3
Тут речь почему-то идет не про настоящие врапперы, а просто про вложенность компонентов. Иногда реально нужна обертка, потому что дивов не хватает застайлить. Тогда название блока выношу наверх, а дальше использую &__inner.
№4
Тоже предпочитаю модификаторы, но имхо не стоит бояться называть по используемому месту, например, так вполне лучше .button--card-view, нежели абстрактные .button--small .button--round.
№6
Я больше склоняюсь к .block--active, по крайней мере обычно начинаю с него. Если действительно предстоит много манипулировать состояниями через JS в подобных компонентах, то .block.is-active будет проще.
№10
На мой взгляд не стоит бояться и делать различные ветки кода в зависимости от медиа-выражений. Т.е. у меня это выглядит примерно так
.block {
@respond-to('mobile') {
// стили мообилок
}
@respond-to('tablet-desktop') {
// стили планшета и десктопа
}
}respond-to это миксин, который генерит медиавыражения в зависимости от ключевого слова.
- "Не появятся ли у компонентов миллион классов?"
<button class="c-button--primary-huge is-active">Click me!</button>Слишком хрупко. Не понимаю, чего все верстальщики так за классы держатся. С атрибутами тут получается куда гибче, проще и наглядней:
<button my_button="primary huge" my_button_active="true">Click me!</button>[my_button] { border: 1px solid steelblue; background: none; padding: .25rem }
[my_button*="huge"] { zoom: 2 }
[my_button*="primary"] { background: steelblue; color: snow }
[my_button_active="false"] { opacity: .5 }my_button — блок
primary, huge — статические модификаторы
my_button_active — динамический модификатор
Этот стиль именования очень сильно популярен в англоязычной среде, думаю, что его популярность связана с тем, что автор этого стиля, Гарри Робертс, одним из первых заговорил о БЭМ в англоязычной среде. Советую прочитать вам оригинальную статью, там он многое объясняет.
Сражаясь с БЭМ: 10 основных ошибок и как их избежать