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

Question

Odisseya @Odisseya

Оптимизирую PageSpeed & Performance

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

Встретился проект с нетипичным способом микса БЭМ именования классов и 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 — в отдельных файлах (без позиционирования)

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

Вопрос задан более трёх лет назад
2851 просмотр

2 комментария

Подписаться 4 Простой 2 комментария

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

<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 @Odisseya Автор вопроса

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

Написано более трёх лет назад

Решения вопроса 1

2 комментария

Odisseya @Odisseya Автор вопроса
Виталий, спасибо за развернутый ответ!
Там всего пара свойств, зачем их переопределять

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

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

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

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

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 4

Комментировать

7 комментариев

Odisseya @Odisseya Автор вопроса
Как мудрый опытный человек, подскажите, как обычно при верстке с БЭМ на маленьких проектах вы внедряете сетку? Я обычно сетку как сущность вообще не выделяю, просто вписываю ее как элемент БЭМ-блока:
.block .block__inner .block__grid .block__title .block__menu

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

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

Написано более трёх лет назад
Odisseya @Odisseya Автор вопроса

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

Написано более трёх лет назад
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 @Odisseya Автор вопроса

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

Написано более трёх лет назад
dom1n1k @dom1n1k

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

Написано более трёх лет назад
Odisseya @Odisseya Автор вопроса

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

Написано более трёх лет назад

Комментировать

2 комментария

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

Bootstrap

Простой
Как применить стиль bootstrap для картинки из media?
- 1 подписчик
- 17 апр.
- 22 просмотра
0

ответов
Bootstrap

Средний
Как сверстать такую конструкцию в BS?
- 1 подписчик
- 16 апр.
- 50 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Как открыть первый tab в bootstrap 5 используя js?
- 1 подписчик
- 16 апр.
- 53 просмотра
2

ответа
CSS

+1 ещё

Простой
Как сделать анимированное закрытие модального окна bootstrap?
- 1 подписчик
- 14 апр.
- 71 просмотр
0

ответов
HTML

+1 ещё

Простой
Как правильно добавить в данном примере сайдбар и main по бэм?
- 2 подписчика
- 04 апр.
- 169 просмотров
0

ответов
React

+1 ещё

Простой
Кто является родителем временных файлов Bootstrap?
- 1 подписчик
- 19 мар.
- 47 просмотров
1

ответ
React

+1 ещё

Средний
Как предотвратить перенос компонентов на новую строку в React BootStrap?
- 1 подписчик
- 17 мар.
- 56 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как сделать изначалаьно открытое модальное окно на бутстрап 5?
- 1 подписчик
- 06 мар.
- 86 просмотров
3

ответа
CSS

+1 ещё

Средний
Сайт не показывает задний анимированный фон, что делать?
- 1 подписчик
- 06 мар.
- 88 просмотров
1

ответ
Bootstrap

Простой
Как открыть несколько модальных окон в bootstrap 5?
- 1 подписчик
- 29 февр.
- 55 просмотров
1

ответ
Показать ещё Загружается…

Backend Developer в бьюти-платформу LUUK

УК «Решения» • Москва

от 200 000 ₽

Angular frontend developer, разработчик middle+

IT Force • Краснодар

от 200 000 ₽

Middle+ Marketing manager

Правое полушарие Интроверта

от 120 000 ₽

Разработать интранет сайт (корпоративный портал)

20 апр. 2024, в 07:24

100000 руб./за проект

Исправить адаптивную верстку на Tilda Zero Block

20 апр. 2024, в 06:39

4000 руб./за проект

Доработка аддона для Xenforo v2.2.13

20 апр. 2024, в 06:06

200 руб./за проект

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

<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>

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

Answer 1 · 2018-11-04 23:36:46

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

<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 смотря какие стили собираетесь вешать...

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

Answer 2 · 2018-11-04 21:07:54

Алексей Николаев @Heian

Ашот

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

Ответ написан более трёх лет назад

Комментировать

Answer 3 · 2018-11-05 12:54:04

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

Answer 4 · 2018-11-05 10:26:06

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

Answer 5 · 2018-11-04 21:18:24

sim3x @sim3x

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

.someblock
  @extend row

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

Ответ написан более трёх лет назад

2 комментария

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

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт