Как совмещать bem и bootstrap?

[koderhun]

В старых проектах везде используется bootstrap и не всегда есть настроянный галп и препроцессоры css. От этого работать с такими проектами просто не хочется. Как можно совмещать bem и bootstrap ?

[tadatuta]

Можно предложить много разных подходов в зависимости от задачи. Расскажи, пожалуйста, подробнее про

1. Чего хочется добиться в результате?
2. Какую часть из того, что есть в БЭМ хочется использовать?
3. Как устроены текущие проекты (это просто верстка или используются какие-то серверные шаблоны и т.д.)?

[koderhun]

В результате я хочу максимально переиспользовать сверстанные блоки. Пока это просто html страница в будущем будет натянут на движек. Просто разработчики очень часто пользуются готовыми компонентами bootstrap.

[tadatuta]

Все еще не хватает ответа про то, что именно из БЭМа хочется использовать:

1. Нейминг в CSS
2. Разбиение блоков по файловой системе
3. i-bem.js
4. Шаблоны
5. Готовые библиотеки блоков (bem-core, bem-components, etc.)
6. Сборку

И еще вопрос. Верно ли я понял, что задача в том, чтобы получать от сторонних разработчиков, не знакомых с БЭМ, верстку с использованием Bootstrap и дорабатывать ее с помощью собственных блоков, написанных по БЭМ?

[qfox]

Если есть возможность использовать сборку, то можно собрать свой bootstrap с нуля или на базе bem-core/bem-components.

Если нет возможности, то можно взять dist (сборку всего) и использовать по аналогии с bootstrap — html сниппетами.

Лучше всего, конечно, собирать — в этом случае ничего лишнего не попадает в собранную страницу. Каждый компонент (блок) будет лежать в своей папке, . Но если это не критично, то dist... Пост про последний https://ru.bem.info/blog/bem-as-bootstrap/

upd: Ну и да, если не хочется i-bem.js, то bem-core не подходит.

[tadatuta]

@zxqfox Чтобы не попадало лишнее, можно использовать генератор диста.

[koderhun]

@tadatuta Верстку я делаю я с нуля и даю разработчикам, потом вместе мы его интегрируем. Разработчики не знакомы с бэм, ну мне кажется им пока это и не нужно, по тому что они редко вмешиваются в верстку. Мне нужно наименование стилей. Ну и возможно вывод некоторых блоков в отдельные файлы.

[tadatuta]

Если речь только про стили, то можно либо вообще ничего не делать (стили Bootsrap оставить как есть, все остальное именовать в соответствии с БЭМ, проблем быть не должно), либо сконвертировать Bootstrap в БЭМ-нотацию.

Я давным-давно порывался что-то такое сделать с какой-то старой версией. Еще есть аналогичная версия от gfranco, правда тоже не доведенная до конца и давно заброшенная.

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

А по поводу примера простого разбиения верстки на отдельные файлы могу порекомендовать вот этот вебинар.

[Guria]

А от бутстрапа что именно требуется? Возможно для этого уже есть альтернативы. Например, bem-grid для сетки. Просто после БЭМификации бутстрапа сторонние компоненты уже все равно не получится подключить.

[weynemeynen]

Я же подключаю bootstrap sdn, затем пишу в bemjson типа: cls: "container". Мухи и котлеты отдельно.

[AlexandrBukhtatyy]

@weynemeynen так можно в BEMJSON описывать структуру html-странички и не заморачиваться с блоками?

[apsavin]

Можно просто писать html, использовать классы из бутстрапа и ни с чем не заморачиваться. Очень удобно.