Микс БЭМ и bootstrap-сетки, это читабельно?

Question

[Odisseya]

Встретился проект с нетипичным способом микса БЭМ именования классов и bootstrap-сетки. И вроде бы по правилам и конфликтов стилей сетки и стилей БЭМ-блока не возникает… Но есть сомнения в читабельности такой логики.

Типы классов для позиционирования

• Глобальные классы сетки: .container и .row
  
• Класс для флекс-колонки внутри .row: .<block>__col-<element> (навешивается на БЭМ-элемент, не имеет явной логической привязки к классам сетки)
  

Пример html-структуры:

<header class="page-header">
  <div class="container  page-header__container">

      <div class="row  page-header__row">
        <div class="logo  page-header__col-logo">…</div>
        <nav class="main-nav  page-header__col-menu">
          <ul class="main-nav__list">…</ul>
        </nav>
        <div class="page-header__col-email">
          <div class="page-header__email">…</div>
        </div>
      </div>
	 
  </div>
</header>

CSS

• Сеточные классы для конкретного блока переопределяются за счет повышения специфичности добавлением класса:.block__container.container и .block__row.row
  
• Класс колонок держит специфичность всегда на одном уровне: .block__col-<element>
  
• В классы позиционирования инклюдятся Bootstrap миксины.
  

Например, для html приведенного выше:

// Сетка
.page-header {
	&__container.container {}
	&__row.row {}
	&__col-logo {}
	&__col-menu {}
	&__col-email {}
}

// Оформление
.page-header__email {}

// Оформление вложенных блоков logo, main-nav — в отдельных файлах (без позиционирования)

БЭМ-знатоки, подскажите, логика просматривается? Для поддержки монстра с таким именованием документации будет достаточно или стоит переписать на что-то более привычно-читабельное (отдельные позиционирующие классы и разметка сетки на обертках).

Comments

[alex]

я нихрена не понял. такое ощущение, что вы взяли что-то простое и усложнили его правилами, понятными только вам одной

<div class="page-header__col-email">
          <div class="page-header__email">…</div>
        </div>

зачем? когда можно проще <div class="col page-header__email">...</div>

переопределяются за счет повышения специфичности

слово специфичность одно из запретных в мире бэма

вот есть у вас два блока foo и bar. чтобы вложить один в другой у вас есть два пути :

#1
<div class="foo__element">
  <div class="bar"></div>
</div>

#2
<div class="foo__element bar"></div>

все. и не надо больше ниче придумывать и усложнять

[Odisseya]

Alex, в целом вашу мысль поняла и разделяю — «нечитаемо». В классическом БЭМе используют префикс для layout'а. Автор этой разметки попытался вписать еще одну абстракцию — уровень логики позиционирования в элемент и вышла каша. Спасибо!

Answer 1

[Виталий Першин]

Как по мне это абсолютно бесполезные миксы:

<div class="container  page-header__container">
<div class="row  page-header__row">

Там всего пара свойств, зачем их переопределять, создайте свои блоки по БЭМ с нужными вам свойствами, в данном случае достаточно просто убрать container и row

Вот это вообще не микс:
logo page-header__col-logo
либо так: page-header__logo
либо с модификатором ключ-значение: page-header__logo page-header__col_type_logo

Меню и мейл почти тоже самое:
либо page-header__main-nav
либо все же если акцент на col, то пара ключ-значение: page-header__col page-header__col_type_menu, а еще лучше абстрактно page-header__col_size_small смотря какие стили собираетесь вешать...

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

Comments

[Odisseya]

Виталий, спасибо за развернутый ответ!

Там всего пара свойств, зачем их переопределять

По мнению автора сего творения, чтобы отделить: а) общие типовые правила сетки от локальных правил сетки применимых только к текущей сущности; б) стили позиционирования от стилей оформления.

• .row — это глобальный стиль сетки: флекс-контейнер с отрицательными отступами.
  
• .page-header__row.row — это локальный стиль сетки: кастомизированный под сущность флекс-контейнер (например, переопределяет align-items и margin), содержит только позиционирование.
  
• .page-header__row — не содержит позиционирования, задает наследникам общие стили оформления.
  

Теперь про приставку «col» в названии элемента — это, маркер конкретной ячейки сетки, в классах с таким маркером могут содержаться стили позиционирования, но не оформления. Оформление содержит дочерний элемент. Вроде, как бы и вполне БЭМ-элемент, но именование своеобразное.

Верстальщик попытался разделить представление сетки на локальный и глобальный уровни, и отдельно от позиционирования вынести оформление. Смешал договоренности об именовании и получилось что-то странное.

[Виталий Першин]

Odisseya, про row и container я понял мысль, в целом если по БЭМ то такой микс имеет место быть, но я бы постарался избавиться от таких селекторов .page-header__row.row

Answer 2

[Алексей Николаев]

Говнокод какой-то. Лично я ужаснулся. Лучше бы автор на чистом буцрапе делал.

Answer 3

[dom1n1k]

Меня порой поражает своеобразие мышления отдельных персонажей, которые умудряются простые в общем-то принципы бэма извратить в нечто странное (это очень мягко говоря). Вот тут описан один из таких примеров. А потом пишут статьи на хабр, какой бэм плохой :)

Comments

[Odisseya]

Как мудрый опытный человек, подскажите, как обычно при верстке с БЭМ на маленьких проектах вы внедряете сетку? Я обычно сетку как сущность вообще не выделяю, просто вписываю ее как элемент БЭМ-блока:

.block
.block__inner
.block__grid
.block__title
.block__menu

Где __inner — обертка для ограничения max-ширины, __grid — флекс-контейнер. Уважаемый Декарт, как вы обычно вписываете сетку? Выносите ли контейнер в отдельный блок, чтоб миксовать с другими блоками?

[dom1n1k]

Бывает по-разному. Зависит от того, есть ли на сайте "глобальная" сетка. Если да, то её логично сделать отдельными классами и миксовать с классами самих блоков. Принцип, подобный бутстрапу. Обычно бутстрапо-сетки любят программисты, потому что это технологично, можно собирать страницы из максимально унифицированных кирпичей.
Если же дизайн сайта более-менее сложен, его обычно трудно вписать в 12 одинаковых колонок. Там и колонки могут быть разной ширины, и количество их меняться от блока к блоку. Тогда да, встраиваю эту логику в сам блок. Однако под капотом при этом могут использоваться некие миксины, которые вычисляют ширину колонок, например в каких-то условных юнитах.

[Odisseya]

Если взять первый случай с "глобальной" сеткой, как вы в ее классе передаете значение ширины конкретной ячейки сетки (количество занимаемых ею колонок)? Указываете его в примиксованном классе ячейки сетки через key-value-модификатор или пишите генерированные классы с разными ширинами как в Bootstrap? Если делать микс с классами ячеек аля Bootstrap не усложняет ли это восприятие html-структуры?
***
За этот год мне чаще стали встречаться заказы: «чтоб никаких бутстрапо-подобных классов, хотим чистый html по БЭМу», причем даже без миксов — только на обертках.
***
dom1n1k, спасибо, что делитесь опытом, всегда с удовольствием читаю ваши комментарии, полезные и обстоятельные пояснения!

[dom1n1k]

Если мы хотим строгого бэма, то сразу упираемся в идеологическую дилемму: а колонки шириной 1, 2, 3,... 12 - это разные элементы или модификации одного?
Если считать, что все колонки это один элемент, то придется городить что-то типа:

<div class="some-block grid__col grid__col--span-3 grid__col--offset-3">

Не нравится.
Во-первых, слишком длинно и сложно.
Во-вторых, я всё-таки склоняюсь, что колонки разной ширины - это разные элементы, а не модификаторы. Обоснование: модификаторы, по логике, должны быть опциональным и комбинируемыми.
Так что в данном случае предпочту что-то типа:

<div class="some-block grid__col-3 grid__offset-3">

Согласен, что тут тоже много спорной вкусовщины.

В целом не очень люблю 12-колоночные сетки - они удобны для конвейерного кодинга, но для нормального дизайна превращаются в прокрустово ложе.

[Odisseya]

Интересное замечание про «комбинируемость» как признак модификатора.
Например, в material-сетке (по БЭМ) кроме явного указания модификатором величины колонки, есть опциональная возможность комбинировать модификаторы указывающие величину колонки под разные ширины устройств. Подпадает под критерии «опционально и комбинируемо», но в результате да, выходит довольно громоздкая конструкция.
***
Если рассматривать ячейку (колонку) как отдельный элемент то, когда ей добавляем классы под адаптив, вновь получаем «классянку», визуально чуть менее громоздкую чем с модификатором. В моей практике зачастую выходит, что сетка не выделяется как сущность и классы смотрятся аккуратно. А когда на проекте Bootstrap то приходится совмещать методики, для сетки использую оригинальные Bootstrap-классы, а все нестандартное пишу по БЭМу.

[dom1n1k]

Я тоже предпочитаю описывать адаптивность внутри самих блоков.
В любом более-менее сложном дизайне адаптация блоков выходит за рамки примитивных правил типа "было в две колонки, станет в одну". Меняется много чего и это всё равно нужно описывать в CSS. Если при этом еще и совать вереницу классов в HTML, правила адаптации получатся размазанными по двум местам.
Кроме того, редко когда получается обойтись глобальными брейк-пойнтами - очень часто какой-то блок хочет сложиться пораньше, а какой-то попозже.
Сетки а ля бутстрап - это фаст-фуд со всеми вытекающими. Удобно нафигачить быстрый прототип или несложную админку, но дальше ограничений масса.

[Odisseya]

Импонирует ваш системный подход, порой именно его в верстке недостает. Спасибо за увлекательный мастер-класс!

Answer 4

[anxieter]

Я как -то пытался такое провернуть. Выходит нечитаемая каша. Согласен с Алексеем Николаевым.

Answer 5

[sim3x]

Изучите sass/less
Используйте конструкции типа

.someblock
  @extend row

ruby.bvision.com/blog/please-stop-embedding-bootst...

Comments

[Odisseya]

Спасибо, уж давно изучено. Вопрос не в способе подключения Bootstrap сетки, а в читабельности предложенной методологии именования классов.

[sim3x]

Odisseya, нечитабельно
Уже в 2012 году люди так не работали с bs