Как совместить сетку и БЭМ?

Question

[alex-85]

Здравствуйте.

Долго думал использовать ли сетку или нет, пришел к выводу что нужно. Выбор стоит между миксинами bootstrap 4 и susy.

Ну и сам вопрос как совмещать сетку с БЭМ?
К примеру, такие блоки как кнопка или поле ввода сетка не затрагивает. А вот блок хедер – там в большинстве случаев и меню и логотип и контакты и поиск и т.д., а это уже сетка.
Делать сетку из элементов хэдера .header__logo, .header__menu или добавлять классы к этим элементам .header__logo .col-2?
Или верстать сетку, а элементы в нутрии?:

<div class="col-2">
	<a href="/" class="header__logo">

Заранее спасибо.

<!-- Вариант #1 -->

<header class="header">
	<div class="header__in">
		<a href="#" class="header__logo logo">LOGO</a>

		<nav class="header__menu menu">
			....
		</nav>
	</div>	
</header>

<!-- Вариант #2 -->

<header class="header container">
	<div class="header__in row">
		<a href="#" class="header__logo logo col-2">LOGO</a>

		<nav class="header__menu menu col-10">
			....
		</nav>
	</div>	
</header>

<!-- Вариант #3 -->

<header class="header">
	<div class="container">
		<div class="row">
			<div class="col-2">
				<a href="#" class="header__logo logo">LOGO</a>
			</div>

			<div class="col-10">
				<nav class="header__menu menu">
					....
				</nav>
			</div>
		</div>
	</div>	
</header>

Comments

[Сергей delphinpro]

Я предпочитаю миксины к классам .header__logo ...
А в контенте (новости например по колонкам раскидать) — классы .row/.col-*

[alex-85]

спасибо за ответ.
А как именно вы используете миксины бутстрапа? Генерируете нужную сетку и @extend-дите свойства к нужным классам? Или вызываете миксины для нужных классов? :

.header__logo{	
  @include make-col-ready();
  @include make-col(12); 

  @include media-breakpoint-up(sm) {
    @include make-col(2);
  }
}

Answer 1

[Олег]

Я сделал блок grid и все, один раз написал и пользуйся потом во всех проектах, если лень, то да, можно просто взять от bootstrap, но тогда лучше вкладывать БЭМ сущности в сетку, если миксовать, то будет совсем кашка.

Comments

[alex-85]

А можете, пожалуйста, показать кусок кода, если можно то целую верстку?

[Олег]

alex-85, https://github.com/werty1001/app/blob/master/block...

[alex-85]

Спасибо большое, внимательно ознакомлюсь с вашими наработками, очень интересно.

К вопросу добавил 3 варианта верстки.

Вариант 1 - подставляем к элементам стили от сгенерированной сетки

.header__logo
  @extend .col-2

Вариант 2 - добавляем к блокам и элементам классы стилей

Вариант 3 - верстаем сетку отдельно от блоков

Самым оптимальным мне кажется Вариант 1.
Вариант 2 - тоже мне нравиться, идет разделение стилей сетки и БЭМ сущностей, правда пока не пойму какой плюс от этого (применительно к стилям сетки). С другой стороны идет добавление лишних классов в ХТМЛ (хотя вряд ли это шибко критично)
Вариант 3 - здесь мне кажется сетка может больше мешать, чем помогать (возможно я не прав).

Подскажите пожалуйста в чем плюсы/минусы этих подходов?

[Олег]

alex-85, Выбирайте тот вариант, который удобен лично вам, "правильного" здесь нет.

Answer 2

[sim3x]

.header__logo
  @extend .col-2

sass-lang.com/documentation/file.SASS_REFERENCE.ht...

Comments

[alex-85]

Да, я думал об этом, но тогда блоки не будут независимыми, они будут зависеть от сетки.
Если я решу сменить сетку, то блоки уже не будут работать.

[sim3x]

alex-85,
Они будут зависеть от фреймворка
Думайте о такой смене, как о замене цсс а какой-то другой язык

[alex-85]

Подумал над вашими словами и думаю вы правы, не выйдет использовать сетку и верстать так что бы все блоки были независимы от нее.

К вопросу добавил 3 варианта верстки.

1 вариант – это ваш пример с @extend (склоняюсь к тому что бы остановиться на нем).
2 вариант – стили сетки добавляем отдельными классами к БЭМ элементам.

В чем разница в этих двух подходах? Будет ли между этими вариантами разница в процессе разработке? Поддержки?

[sim3x]

alex-85,

2 - оверкил и не будет соответствовать бем

будет реинкарнация говнокода типа div class="width123 height10 border1"

Что в итоге приведет, к тому, что верстка не будет отделена от стилей

Answer 3

[Yastr]

Когда то был стажером в фирме, занималась разработкой огромных, международных проектов.
Там, работая с сеткой, меня прям заставляли делать именно так как вы предлагаете.
Сейчас, что то типа "технического директора" в небольшой компании, и во всех проектах, которые веду придерживаюсь такой схемы, и сотрудников приучил к такому.

Но тут загвоздка в том, что сам над этим вопросом не задумывался. Как научили так и делаю, и возможно мой тим лид был не прав)

.col-2>.header--logo