BEM + Bootstrap(bootstrap grid system), Как правильней делать каркас??

Question

[MadMax90]

Примешивать bootstrap классы к BEM-блокам или создавать отдельно bootstrap-блоки и в них помещать BEM-блоки??
Есть такая структура https://jsfiddle.net/5eLqLv2b/
Выглядеть должно как на картинке

Comments

[mishapsv]

Было бы, кстати, интересно как работатют именно с лесс/сасс версией бутстрапа с БЭМом

[MadMax90]

Прошу все таки помочь разобраться где должны быть .row?! b-header это наш container. b-header__logo, b-header__support, b-header__nav-menu это colums(col-md-).

Answer 1

[Александр]

Если хотите true-БЭМ в html коде, то для создания сетки и элементов правильнее использовать не классы в html, а миксины less или sass. Например, вот less-миксины для сетки https://github.com/enyojs/enyo-docs/blob/master/as...

Comments

[Александр]

Вот пример andersonorui.com/2014/08/08/bootstrap-sass-bem

[Андрей Бережной]

Воу, офигенно! Даже как-то не думал о таком. :)

[MadMax90]

Прошу все таки помочь разобраться где должны быть .row?! b-header это наш container. b-header__logo, b-header__support, b-header__nav-menu это colums(col-md-).

[Александр]

MadMax90: container можно оставить в html как самостоятельный блок, отвечающий за layout (так, например,сделано на многих проектах яндекса). Тогда b-header станет row. Вообще .row это по сути clearfix - используйте его там, где это действительно нужно

Answer 2

[Александр]

Помещать БЭМ блоки в col-* - так меньше геморроя будет. В исключительных случаях (например убрать padding какой-нибудь у колонки) - навешивать класс на необходимый div

Это уже по опыту могу сказать

Comments

[MadMax90]

Можете показать пример такой верстки? Я ни один сайт не могу найти для примера. Может это вообще не удачаное решение?

[Александр]

new.formula76.ru для примера

[MadMax90]

Александр: Спасибо за пример

Answer 3

[Арсений Ильяшов]

Если я правильно понял ваш вопрос, то рекомендую использовать конвенцию имён бутстрапа при использовании БЭМ, потому что БЭМ - это в первую очередь методология, целью которой является прозрачность кода и изоляция стилей. А если вы будете смешивать две конвенции имён, то прозрачность кода вы ухудшите.