Стоит ли разделять 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 файлов.
Вот такая гипотеза. Хочется получить мнения целесообразности такого подхода.
![Зачем и как правильно оформлять страницы сайта?](/preview/blog_also/pic/16799_clickon.png)
![Семинар по продвижению услуг учреждений культуры в социальных сетях](/preview/blog_also/pic/16784_Seminar.jpg)
![Как сэкономить на контекстной рекламе или не Директом единым...](/preview/blog_also/pic/16695_Kak-syekonomit-na-kontekstnoj-reklame-ili-ne-Direktom-edinym.png)
![Таргетинг по тематическим площадкам в РСЯ](/preview/blog_also/pic/16677_Targeting-RSYa.png)
![Зачем платить за рекламу в социальных сетях](/preview/blog_also/pic/16575_Zachem-platit-sotsseti.png)
![Какие сайты должны использовать сертификаты безопасности?](/preview/blog_also/pic/15934_announce.png)
![Что продается в социальных сетях](/preview/blog_also/pic/15912_Chto-prodaetsya-v-sotsialnyh-setyah.png)
![Контекстная реклама или SMM, что выбрать?](/preview/blog_also/pic/15458_Konntekstnaya-reklama-i-SMM-printsipy-raboty.png)
![Каким должен быть сайт медицинского учреждения?](/preview/blog_also/pic/15294_Kakim-dolzhen-byt-sajt-meditsinskogo-uchrezhdeniya.png)
![Палех. Жар-птица для оптимизатора](/preview/blog_also/pic/14942_Novyj-algoritm-Paleh.png)
![Участие в семинаре "Как создать успешную рекламную компанию в Google AdWords"](/preview/blog_also/pic/14780_Shablon.png)
![Google Tag Manager все скрипты в одном контейнере…](/preview/blog_also/pic/14668_Google-Tag-Manager-vse-skripty-v-odnom-kontejnere.png)
![UTM метки в SMM или как считать лиды из социальных сетей](/preview/blog_also/pic/13436_Shablon.png)
![Черная и белая стороны продвижения в Instagram](/preview/blog_also/pic/13384_Shablon-3.png)
![Новый пиксель ВКонтакте - новые возможности по сбору баз ретаргетинга с сайтов](/preview/blog_also/pic/13211_logo.jpg)
![Почему seo-продвижение сайтов это не только ссылки?](/preview/blog_also/pic/12417_Rynok_APK.png)
![Старые продукты. Польза или вред?](/preview/blog_also/pic/12379_cashFire.png)
![Версия для слабовидящих - нюансы разработки](/preview/blog_also/pic/12192_4.png)
![Почему мы используем Parser в большинстве своих проектов?](/preview/blog_also/pic/12067_Parser.png)
![Что показывает статистика Яндекс Wordstat](/preview/blog_also/pic/11950_skachannye-fajly-19.png)
![Что лучше адаптивная вёрстка или мобильная версия](/preview/blog_also/pic/11386_1111.jpg)
![Новый алгоритм "Владивосток" - ранжирование сайтов в мобильном поиске Яндекса](/preview/blog_also/pic/10810_Logo.png)
![Поздравление клиентов с новым 2016 годом](/preview/blog_also/pic/10295_image-3.jpeg)
![Адская капча](/preview/blog_also/pic/9650_capcha.png)
![Что нужно дизайнеру для работы в web-студии?](/preview/blog_also/pic/9207_preview_requirements.png)
![ClickON на семинарах Google AdWords и Google Analytics в Волгограде](/preview/blog_also/pic/9173_11439819847278.jpg)
![Интересные страницы ошибок 404](/preview/blog_also/pic/8781_logo.png)
![Творческий клиент — инфаркт дизайнера](/preview/blog_also/pic/8585_client.png)
![Никто не знает что такое “тех.поддержка сайтов”](/preview/blog_also/pic/8449_1tehpodderzhka.jpg)
![Что такое продвижение с социальных сетях (SMM) и что оно даст вашему бизнесу?](/preview/blog_also/pic/8435_Dlya-bloga.jpg)
![Как организовать рассылку со своего сайта и не попасть в спам-лист](/preview/blog_also/pic/8408_image00.png)
![SEO 2.0](/preview/blog_also/pic/8390_seo.jpg)
![Яндекс отжигает :)](/preview/blog_also/pic/8296_Yandeks-otzhigaet.png)
![Вот нехорошо, но не удержался](/preview/blog_also/pic/8334_Vot-nehorosho-no-ne-uderzhalsya.png)
![А вот просто про время. :)](/preview/blog_also/pic/8335_A-vot-prosto-pro-vremya.png)
![Человечные опыты над Blender (часть II)](/preview/blog_also/pic/8337_Blender2.png)
![Как должна называться правильная веб-студия, или "фух, отлегло" :)](/preview/blog_also/pic/8338_Kak-dolzhna-nazyvatsya-pravilnaya-veb-studiya.png)
![Никто его не любит, не любит, не любит...](/preview/blog_also/pic/8340_Nikto-ego-ne-lyubit-ne-lyubit-ne-lyubit.png)
![Это очень смешно и это реально одновременно.](/preview/blog_also/pic/8341_Yeto-ochen-smeshno-i-yeto-realno-odnovremenno.png)
![Продвижение сайтов в Волгограде — держи карман крепче](/preview/blog_also/pic/8342_Prodvizhenie-sajtov-v-Volgograde.png)
read
На dev версии должно быть разделение файлов для удобной разработки. На production всё должно объединяться в один файл css и один js. Всё должно минифицироваться. Плюсы: малое кол-во запросов на сервер для получения статики; более быстрая загрузка страницы для клиента; то, что файл получится большой, не совсем беда - он закэшируется на клиенте; более быстрая загрузка страницы положительно сказывается в СЕО.
ShaGGy
Именно. Подцепляем один раз, объединяем и кэшируем. Это и имелось в виду.