Стоит ли разделять CSS и JS на более мелкие

При изучении основ сайтостроения, учат все стили и  js-код выносить в отдельные файлы. И, как правило, всё кучей пишется в один большой файл.

В bitrix, как, наверное, и в любой другой CMS, у каждого модуля есть свои собственные js и css файлы. Тут это всё крайне логично, особенно, в случае с подключаемыми модулями. Это скорее следствие реализуемого в той или иной степени иерархического MVC, то есть независимости друг от друга различных частей приложения.

Это заставило меня задуматься, а на сколько лучше(и вообще лучше ли) разбить css и js файлы на более мелкие и подключать в соответствующих разделах.

Возникает два вопроса: “как?” и “зачем?”. Давайте по порядку.

Как?

У нас в ClickON CMS эта возможность есть, но делается это путем передачи дополнительного параметра с указанием имени файла. Вариант неплохой, но я ищу идеальный, чтобы всё само по умолчанию подключалось.

Я навскидку предлагаю два способа подключения “своих” файлов к скрипту.

Первый.

Создавать файлы с одинаковыми названиям в папках со скриптами.

Мы создаем в папке с вызываемым скриптом файлы style.css и script.js. При подключении стилей и javascript’ов в head, проверяем в папке с текущем вызываемым скриптом наличие этих самых файлов и если они там есть, то подключаем их.

Второй.

Создаем в папке, где у нас лежат css и js скрипты файлы с названием папки в которой лежит исполняемый в данный момент скрипт.

Так например, если мы сейчас находимся в clickon/catalog/, то при подключении стилей и js, мы проверяем наличие файлов /css/catalog.css и /js/catalog.js, и если они там присутствуют, то подключаем.

Второй способ лично мне нравится больше, потому, что ничего лишнего в папках и все стили и js лежат в одном месте.

Зачем?

Возможно, для маленького сайта это и бессмысленно.

Если основные стили макета вынести в отдельный файл, а стили необходимые только в каком-то определенном разделе, подключать только в этом разделе, то можно освободить текущую страницу от ненужных строчек кода. Тоже и с js.

Например, есть магазин с интересной версткой каталога с css на 1000+ строк и js на 200+ строк.

Но зачем нам стили верстки каталога на главной странице? То есть, мы убираем ненужные здесь строки кода и получаем меньшие по объёму файлы. В реалиях современных скоростей интернета это, наверное, не так важно, но перфекционисты будут немного рады.

Если разобрать все стили и js по разделам, то будет проще разбираться с кодом в случае правок. То есть ты правишь не общий файл, где всё в кучу навалено, а конкретный файл, соответствующий разделу.

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

Получается своего рода инкапсуляция css и js файлов.

Вот такая гипотеза. Хочется получить мнения целесообразности такого подхода.