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

Question

Кирилл Гладиков @Fapalz

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

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

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

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

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

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

Подписаться 1 Оценить Комментировать

Answer 1 · 2017-01-15 16:48:59

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)

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

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

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