Как правильно реализовывать адаптивную сетку по БЭМ?

Question

[Кирилл Гладиков]

Здравствуйте.
Хотел бы узнать мнение профессионалов о правильной реализации адаптивной сетки по методологии БЭМ.
В чем собственно заключается вопрос.
Я знаю три метода:
1. C помощью специальный классов, как в bootstrap (col-sm-5, col-xs-5 и тд.)
2. @mixin в препроцессорах
3. @extend в препроцессорах

Для меня лично все они имеют свои минусы и плюсы.
1. Классы ускоряют верстку, все правила в одном месте. Но html становится грязным.
2. Миксины оставляют чистым css и html, но увеличивают css файл.
3. Наследование делают css меньшим размером, но грязным из за огромной кучи селекторов.

Какой из этих методов более правильный?

Answer 1

[Дима Паутов]

1 вариант и нужен. То, что много классов, не играет никакой проблемы. Главное именовать их правильно, со смыслом.

<div class="row">
<div class="col col12 collg6 colmd7 colsm8 colxsm12">

<div class="blockText"></div>

</div>
</div>

.row - это блок с сеткой, т.к. я юзаю флексбок, это главный элемент
.col - колонка
.col12 - Сделай ширину колонки по умолчанию 12 из 12
.collg6 - Сделай ширину колонки на разрешении 1069 размером 6 из 12 (lg - large)
.colmd7 - Сделай ширину колонки на разрешении 819 размером 7 из 12 (md - middle)
.colsm8 - Сделай ширину колонки на разрешении 569 размером 8 из 12 (sm - small)
.colxsm12 - Сделай ширину колонки на разрешении 420 размером 12 из 12 (xsm - extra small)

Всё очень просто! А главное, удобно!

Comments

[Кирилл Гладиков]

А что вы скажите насчет бэма? Не очень красиво когда в компоненте появляется отдельные дивы отвечающие за сетку или дополнительные классы.

[Дима Паутов]

Кирилл Гладиков: Что в этом такого? Я всегда сетку разделяю от других элементов. Отдельно колонки, отдельно контент колонок. Код выглядит проще и логичней. Одни классы отвечают за одно, другие за другое. Но в любом случае, не нужно фанатично ужимать html код. Чаще это приводит к костылям, т.к. лень добавлять еще один div для выполнения цели.

Answer 2

[Serj-One]

Миксины. Увеличение размера конечного файла стилей не так велико, чтоб обращать на это внимание.

Answer 3

[Олег]

Я сделал один блок - сетку, пример:

<div class="grid page__layout">
	<div class="grid__row">
		<div class="grid__col grid__col--xs-12 grid__col--md-4">...</div>
		<div class="grid__col grid__col--md-4 grid__col--lg-5">...</div>
	</div>
</div>