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

  

logo

При изучении основ сайтостроения, учат все стили и  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 файлов.

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

SEO 2.0
SEO 2.0
Евгения Медникова
read

На dev версии должно быть разделение файлов для удобной разработки. На production всё должно объединяться в один файл css и один js. Всё должно минифицироваться. Плюсы: малое кол-во запросов на сервер для получения статики; более быстрая загрузка страницы для клиента; то, что файл получится большой, не совсем беда - он закэшируется на клиенте; более быстрая загрузка страницы положительно сказывается в СЕО.

ShaGGy

Именно. Подцепляем один раз, объединяем и кэшируем. Это и имелось в виду.

Создание и продвижение сайтов для бизнеса только кликни мы откликнемся
8-800-77-55-123 Меню
В порядке и на условиях, определённых Федеральным законом от 27 июля 2006 года № 152-ФЗ «О персональных данных». Согласие на обработку следующих моих персональных данных: фамилии, имени, отчества, года, месяцы, даты и места рождения, пола, гражданства, места жительства, в том числе сведения о регистрации по месту жительства, месту пребывания, места работы, социального положения (статуса), реквизитов документа, удостоверяющего личность. Обработка моих персональных данных Оператором осуществляется исключительно в целях защиты моих прав на регистрацию доменного имени, услуги по созданию и продвижению сайтов, услуги по размещению рекламных компаний в интернет и обеспечения соблюдения законов и иных нормативных правовых актов, связанных с предоставлением этих услуг. Я предоставляю Оператору право осуществлять следующие действия с моими персональными данными: сбор, систематизация, накопление, хранение, уточнение (обновление, изменение), использование, обезличивание, блокирование, уничтожение персональных данных, передача персональных данных между: - Оператором ООО «КликОН», в котором мне будут осуществляться вышеперечисленные услуги ; - Оператором АНО «Региональный Сетевой Информационный Центр», осуществляющим непосредственную регистрацию доменных имён ; Мне гарантируется конфиденциальность моих персональных при обработке их и хранении не дольше срока, предусмотренного нормативными актами. Настоящие согласие данное мной и действует бессрочно. Я оставляю за собой право отозвать своё согласие посредством составления соответствующего письменного документа, который может быть направлен мной в адрес Оператора по почте заказным письмом с уведомлением о вручении либо вручен лично под расписку уполномоченному представителю Оператора.