Подключение css/js - что и куда?

Форум /

Здравствуйте. Начал разрабатывать проект, используя методологию БЭМ (именование, организация ФС; full bem stack не использую) - встал вопрос: для каждой страницы и для каждого блока нужно подключать свои стили/js (10 блоков на странице - подключаем 10 css файлов /blocks/blockname/blockname.css, /blocks/blockname2/blockname2.css, 10 js файлов итп ), или же собираем все блоки в один большой css/js, и подключаем его один раз на всех страницах? Есть какие то best practices, кто вообще как это делает? В примерах на github (которые смог найти) по одной странице (бандлу), и , соответственно, разумно собрать все блоки в 1 css и 1 js файл. А для многостраничного сайта, где на разных страницах используются разные комбинации блоков? То же самое касается js,не совсем ясен этот вопрос, в документации, к сожалению, ответов не нашел.

8 years ago

tadatuta

@vlad6085 Универсального ответа нет:

Если страницы более-менее похожи (одинаковые шапка + сайдбар + подвал + много общих блоков в главной части), то логично будет собрать все в один общий бандл и подключить на все страницы.
Если страницы имеют несколько общих блоков (шапка, подвал), но по большей части отличаются, можно собрать общее и подключить на каждой странице + параллельно собрать оставшиеся блоки каждой конкретной страницы. Получится, что на каждую страницу подключены common.css + page-name.css.
Если страницы практически не имеют ничего общего, логично собирать отдельные наборы бандлов на каждую страницу.
Если на странице есть блоки, которые редко используются (например, клик по кнопке показывает огромный попап с множеством блоков внутри, но известно, что нажимают на эту кнопку редко), то стоит разделить обязательные стили/скрипты и такие вот «дополнительные», которые подгружать по наступлению каких-то событий. Эта же схема подойдет для SPA.
А если у вас используется HTTP2, то теоретически можно вообще не собирать файлы, т.к. будет использоваться одно соединение с сервером и возникнет лишь незначительное ухудшение качества сжатия.

Вообще про все это более-менее написано в https://ru.bem.info/method/build/#Результаты-сборки

8 years ago

ejupi

@tadatuta Спасибо, ваш ответ в совокупности с ссылкой на статью документации (как я ее мог не заметить) расставили все точки.

Чтобы оставлять комментарии, необходимо авторизоваться.