Как скрестить webpack и бэм?

Question

[sir_pounce]

Как, с помощью webpack'a, сделать проект, где на каждую страницу будут собираться стили и логика только нужных на этой странице компонентов?

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

Answer 1

[Дмитрий Беляев]

https://webpack.js.org/guides/code-splitting/#dyna...
Ну и стоит задуматься, а нужен ли вообще БЭМ? Эта отвратительная методология создавалась с целью решить проблемы вызванные отсутствием инструментов, но для webpack такие инструменты есть.

Comments

[Владислав Лысков]

О! Единомышленник! Тут в соседнем треде говорят о каком-то БЭМ дзэне

[Дмитрий Беляев]

Владислав Лысков, интересно в чем дзэн? В том что на выходе стили и шаблоны весят в несколько раз больше? Или в невозможности адекватно это все поддерживать и переиспользовать?

[Владислав Лысков]

Дмитрий Беляев, не знаю, вот трэд Как писать хороший и расширяемый css код?

[Realetive]

Дмитрий Беляев, Владислав Лысков, отвечает «познавший дзэн»: стили и шаблоны весят столько же, сколько и при самой удачной однобуквенной минификации (есть такая штука — gzip, он это делает на лету). пруфы: https://github.com/bem-site/bem-forum-content-ru/i...
Если «невозможно адекватно это все поддерживать и переиспользовать», то это не БЭМ, господа, вас обманули.
БЭМ — это не «классы через чёрточку», это про компонентный подход и правильную декомпозицию. Поэтому не используя БЭМ вы или по определению делаете х***ю, или используете какую-то урезанную версию методологии, просто не знаете об этом.

[Владислав Лысков]

Realetive, бэм, как методология, уводит от каскадности, в этом тэзисе я прав?

[Realetive]

Владислав Лысков, отчасти. БЭМ — это своего рода «паттерны проектирования», минимальная каскадность, реиспользуемость на уровне логики и оформления, инкапсуляция получаются «на сдачу» (можно со 100% уверенностью утверждать, что можно разрабатывать не используя ни одного паттерна проектирования, но зачем?). Так что это не тезис, а «следствие». Например, CSS-модули могут решать часть проблем, которые решает БЭМ, но заменой они не станут, т. к. не «закрывают» остальные вопросы.

[Владислав Лысков]

Дмитрий Беляев, походу, с этими адептами лучше не спорить

[sir_pounce]

Владислав Лысков Дмитрий Беляев Что, по итогу, юзать то если не бем? xd Просто css-modules?

[Владислав Лысков]

sir_pounce, есть такая штука - здравый смысл, вот его и юзать

[sir_pounce]

Владислав Лысков, ну такое себе. Адепт выше предлагает готовую методологию, в которой прикрыто большинство вопросов по архитектуре и разработке, если не она, то что? Самому изобретать велосипед?

[Дмитрий Беляев]

sir_pounce, БЭМ - всего лишь идея, притом пропагандирующие БЭМ даже не уточняют, а какой БЭМ они пропагандируют. А на просторах сети можно найти с десяток интерпретаций, некоторые из которых противоречат друг другу. Инструментария - ноль, придется все руками писать, а как следствие от ошибок Вас тоже никто не застрахует.
Лично я встречал в живых проектах несколько разновидностей БЭМа, и только в 1 случае не было больших проблем с поддержкой всей этой каши стилей.
А css-modules - это конкретный инструмент, который решает ту же самую задачу, но только в автоматическом режиме. Притом он гарантирует Вам отсутствие конфликтов стилей.
Решать Вам что выбрать

[Realetive]

Дмитрий Беляев, все интерпритации, выложенные не на bem.info практически всегда являются ошибочными адаптациями — кто-то не осилил дочитать первую страницу до конца, вдохновился, остальное додумал и пошёл строчить в свой бложик:

• css-tricks.com/abem-useful-adaptation-bem
  
• www.smashingmagazine.com/2016/06/battling-bem-extended-edition-common-problems-and-how-to-avoid-them/
  
• blog.kaelig.fr/post/48196348743/fifty-shades-of-bem
  

и т. д. — тысячи их! И в каждой написана чушь. Отсюда и проблемы с поддержкой.

Да, css-модули решают «проблему» с изоляцией, но не решают остальные проблемы: композицию, абстракции, реиспользование, которые в БЭМ получаются «на сдачу». БЭМ — это такая же «идея», как и паттерны проектирования. Можно их не знать и всем рассказывать, что прекрасно решаешь задачи и без «абстрактных фабрик», «декораторов» и «адаптеров» с «наблюдателями». Но качество поддержки таких продуктов скорее всего значительно ниже.

Но и официальная дока не без недостатков — там довольно сложный для понимания технический язык, так что есть телеграмм-чатик для возникающих вопросов: https://t.me/bem_ru