Как выдавать CSS стили пользователю?

Здравствуйте.
У меня большой проект.
Что лучше, сделать 20 CSS файлов которые будут грузится ТОЛЬКО там где надо или же 1 большой CSS который будет грузится везде
  • Вопрос задан
  • 3845 просмотров
Решения вопроса 1
Для разработки разделить файлы по сущностям, например: один шаблон — один 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

P.P.S. Предварительная оптимизация зло.
Ответ написан
Пригласить эксперта
Ответы на вопрос 10
lafayette
@lafayette
В большинстве случаев лучше 1 большой файл загрузить, при этом правильно прописав настройки кэширования клиентами на сервере.
Ответ написан
Комментировать
SEObomj
@SEObomj
Лучше один большой. Вариант «там где надо» предполагает, что на странице по любому будет больше одного css, что не гуд.
Ответ написан
Комментировать
3ybHa9_Fe9
@3ybHa9_Fe9
возможно я и не прав, но:
Если мы имеем один большой css — то это не удобно с точки зрения верстальщика. куда приятней когда /css/_module/news/layout.css для примера
Пользователю без разницы.
Сервер, однажды отдав css'у, на следущие запросы будет отдавать заголовок not-modified — нагрузка будет один раз.

Мое мнение — много css'ок допустимо. Особенно когда есть ни какой нибудь сайт-визитка, где стилей кот наплакал, а портал с кучей модулей.
Ответ написан
есть же скрипты, которые принимают в качестве параметра имена css и выдают в ответ 1 файл + работает кэширование
Ответ написан
Комментировать
Gero
@Gero
Все в один файл сливайте, обфусцируйте его и пакуйте в gzip. От этого будет лучше и пользователю, и серверу.
Ответ написан
Комментировать
kashey
@kashey
Программирую большую половину жизни
1 большой файл в котором есть все нужные стили на часто используемых страницах.
То есть который покроет 70-80% всех запросов.
Остальные бьете на «пакаджы», на разделы и так далее. И тоже клеите относительно большими «выпухлыми» группами.
Если большие группы не получаются — не клеите, а сливаете все в один файл.

И париться с этим надо только если с остальным париться уже не надо
Ответ написан
Комментировать
marcus
@marcus
Две крайности же. Вынесите общие элементы в один ксс, а разные, которые используются на своих страницах, сгруппируйте по смыслу в 2-5 кссников.
Ответ написан
Комментировать
MTonly
@MTonly
Веб-разработчик с 2002 года
Зависит от конкретного сайта. Например, если сайт содержит разношёрстные статьи и большинство посетителей приходит из поисковиков и в среднем просматривает по одной странице, то быстрее будет грузить только те стили, которые реально используются именно на текущей странице. В противном случае может иметь смысл автоматизированно объединять все стили в одну таблицу и упаковывать её в gzip.
Ответ написан
Комментировать
Shugich
@Shugich
Фронтенд-разработчик
смысл css вообще в том, чтобы всё объединять и править из одного места :)

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

К тому же лучше одно обращение к серверу, чем 20. Да и в одном файле куда проще разобраться, чем в 20и.
Ответ написан
goodman
@goodman
Лучше воспользоваться склейкой. То есть у вас есть несколько css файлов, каждый из них отвечает за стилистику отдельных блоков. вставляйте их с помощью connectcss.php/?css=layout,topnews,blog,news,menu

vremenno.net/misc/organization-optimization-and-cache-for-css-js-files/ — вот ссылка, тут подробнее
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы