Здравствуйте.
У меня большой проект.
Что лучше, сделать 20 CSS файлов которые будут грузится ТОЛЬКО там где надо или же 1 большой CSS который будет грузится везде
Для разработки разделить файлы по сущностям, например: один шаблон — один css файл (вы же используете наследование шаблонов, декораторы, слоты, блоки и т. п.? :) ) с максимальным использованием каскадности. Получим, что каждая страница будет запрашивать 1-N css файлов (у меня обычно 6-7 получается, 1 — общий шаблон для всех страниц, 1 — основной контент, 4-5 — меню и прочие блоки в сайдбарах). Можно пойти ещё дальше, разделяя css отдельных сущностей на css позиционирования/размеров, цвета и прочего декора, но имхо, излишне
Для продакшена для каждого реально встретившегося сочетания css генерируем свой один большой css (обычно получается штук 10, незначительно различающихся) и вызываем его для соответствующих страниц (можно ручками, можно средствами движка «на лету» и с кэшированием, можно утилитами) — в общем склейка. Дополнительно его можно обфусцировать и сжать.
Получаем, что для каждой страницы вызывается один css, в котором есть всё, что для неё нужно и нет ничего лишнего.
Плюсы по сравнению с крайностями (единый файл для всех страниц или 6-7 разных файлов для каждой страницы):
— простота разработки (субъективно, кому-то проще в одном файле лазить)
— один вызов css на странице, а значит только одно обращение к серверу (и то, если пользователь не случайный, кэшируется после первого обращения)
— минимальный размер css для каждой отдельно взятой страницы
— минимальное время парсинга файла браузером (а значит и время рендеринга страницы)
Минусы:
— сложность поддержки, если это дело прозрачно не автоматизировано
— для не случайных посетителей совокупный объём трафика будет большим, чем в обоих крайних случаях
— аналогично будет большим и кэш
Плюсы единого файла:
— минимальный совокупный объём трафика и кэша для не случайного посетителя
— один запрос на страницу, кэшируемый для всех страниц сайта
Минусы:
— сложность разработки (субъективно)
— избыточный объём трафика и кэша для случайных посетителей
— большее время парсинга для всех страниц (за редким исключение страниц, которым нужны все css правила проекта)
Плюсы кучи мелких файлов:
— простота разработки (субъективно)
— близкий к минимальному объём трафика и кэша для случайных посетителей, минимальный для не случайных
Минусы:
— много запросов к серверу
— незначительно большее время парсинга по сравнению со «склейкой»
Аналогично можно поступать и с JS
P.S. Предварительная оптимизация зло
P.P.S. Если используете условные «переходы» для IE, то можно или генерировать для него свой большой файл (тогда различий не будет в плюсах/минусах не будет), или вынести все используемые хаки в один файл и подключать его «статически» (тогда у пользователей IE будет два запроса на страницу, один из которых будет иметь плюсы и минусы «динамического» подключения, а второй не будет), или генерировать второй файл аналогично первому (обычно избыточно) — я предпочитаю второй вариант — «динамически» генерируемый общий CSS, и «статический» файл с хаками IE
возможно я и не прав, но:
Если мы имеем один большой css — то это не удобно с точки зрения верстальщика. куда приятней когда /css/_module/news/layout.css для примера
Пользователю без разницы.
Сервер, однажды отдав css'у, на следущие запросы будет отдавать заголовок not-modified — нагрузка будет один раз.
Мое мнение — много css'ок допустимо. Особенно когда есть ни какой нибудь сайт-визитка, где стилей кот наплакал, а портал с кучей модулей.
1 большой файл в котором есть все нужные стили на часто используемых страницах.
То есть который покроет 70-80% всех запросов.
Остальные бьете на «пакаджы», на разделы и так далее. И тоже клеите относительно большими «выпухлыми» группами.
Если большие группы не получаются — не клеите, а сливаете все в один файл.
И париться с этим надо только если с остальным париться уже не надо
Зависит от конкретного сайта. Например, если сайт содержит разношёрстные статьи и большинство посетителей приходит из поисковиков и в среднем просматривает по одной странице, то быстрее будет грузить только те стили, которые реально используются именно на текущей странице. В противном случае может иметь смысл автоматизированно объединять все стили в одну таблицу и упаковывать её в gzip.
Лучше воспользоваться склейкой. То есть у вас есть несколько css файлов, каждый из них отвечает за стилистику отдельных блоков. вставляйте их с помощью connectcss.php/?css=layout,topnews,blog,news,menu
My<cod/>.net
