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 — в отдельных файлах (без позиционирования)


БЭМ-знатоки, подскажите, логика просматривается? Для поддержки монстра с таким именованием документации будет достаточно или стоит переписать на что-то более привычно-читабельное (отдельные позиционирующие классы и разметка сетки на обертках).
  • Вопрос задан
  • 1357 просмотров
Решения вопроса 1
Get-Web
@Get-Web
Front-End Developer
Как по мне это абсолютно бесполезные миксы:
<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 смотря какие стили собираетесь вешать...

В общем даже в таком коде можно определить для себя какой-то единый стандарт, а у вас все перемешано вопреки методологии..
Ответ написан
Пригласить эксперта
Ответы на вопрос 4
Говнокод какой-то. Лично я ужаснулся. Лучше бы автор на чистом буцрапе делал.
Ответ написан
dom1n1k
@dom1n1k
Меня порой поражает своеобразие мышления отдельных персонажей, которые умудряются простые в общем-то принципы бэма извратить в нечто странное (это очень мягко говоря). Вот тут описан один из таких примеров. А потом пишут статьи на хабр, какой бэм плохой :)
Ответ написан
anxieter
@anxieter
Я как -то пытался такое провернуть. Выходит нечитаемая каша. Согласен с Алексеем Николаевым.
Ответ написан
sim3x
@sim3x
Изучите sass/less
Используйте конструкции типа

.someblock
  @extend row


ruby.bvision.com/blog/please-stop-embedding-bootst...
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы