1 css для всего сайта или разный каждой странице?

Question

[SeiLove]

Всем добрый день! Давно дискутируем с другом по данному вопросу, однако, оба новички и прийти к окончательному решению не можем. Опишем типичную ситуацию:
Допустим имеется сайт, в котором большое кол-во уникальных страниц с различными элементами. Дизайн изначально построен таким образом, что мало схитришь и не сэкономишь на коде.
И встаёт вопрос: Следует ли на весь сайт для всех страниц писать единый css или лучше для каждой страницы свой? С одной стороны, чем меньше css тем быстрее грузится? С другой стороны... css же кэшируется, а значит 1 раз загрузить большой стиль будет лучше?

Comments

[Billy Milligan]

какой размер у вашего файла со стилями? если объединить в один

Answer 1

[Денис Инешин]

Не парьтесь на эту тему. Одного CSS-файла на весь сайт достаточно. Если вы все стили склеите в один файл, сожмете в строчку, а потом еще сервер это пожмёт gzip-ом. То это достаточная оптимизация.

Answer 2

[Максим Тимофеев]

Если уж совсем разный css везде, тогда делайте:
1 общий
а на каждой странице в header

<style>
ваш код уникальный для каждой страницы
</style>

Но на практике использую 1 css и иногда подключаю css файлы различных виджетов и плагинов. Даже не представляю что там у Вас за проект, в котором на каждой странице разный css, да еще в таком объеме, что нужно его делить.

Comments

[Игорь Пушкарский]

Делаю также, основной файл стилей везде, + файл стилей плагинов только на тех страницах где они используются.

[alekseyfedorov88]

дорогой друг, если ты меня слышишь и читаешь - помоги. Мучает один вопрос по поводу этого тега style ! Второй день штудирую интернет, но не могу понять, я учусь только, как на примере прописать для этого тега style в css файле скрипт, что бы для каждой страницы был свой фон. СПАСИБО заранее.

[Максим Тимофеев]

alekseyfedorov88: Дорогой друг, оформи этот вопрос, как вопросом, а не как коммент и распиши подробнее. Вариантов миллион. От задания фона через style или добавления для body определенного класса и до js решений с ротатором фона.

[alekseyfedorov88]

может я и ошибаюсь по поводу style и он не сможет мне помочь и есть более подходящий для моего случая вариант. Суть в том, что я хочу сделать отличие в каждом разделе только в самой шапки, для каждого раздела свое изображение, которое информирует посетителя о теме. Каким методом это лучше всего сделать ? Работаю пока только с html и css. Сейчас изучаю php. Если необходимы примеры моих скриптов - скажите куда скинуть

[Максим Тимофеев]

alekseyfedorov88:
1. кидают код обычно сюда: https://jsfiddle.net
2. по поводу style Вы ошибаетесь
3. Как я могу знать какой метод для Вас оптимальнее если я ничего не знаю о Вашем проекте?
4. Для смены фона на страница style самое оно, но теперь Вы говорите о изображении в шапке, в чем проблем на разных страницах выводить разное? Не могу понять с чем у Вас проблемы.

[alekseyfedorov88]

https://jsfiddle.net/alekseyfedorov88/05p951v8/4/
вот пример, где я в html сделал привязку к css . Шапку я сделал через BODY . Наверное из-за этого и идет у меня путаница. И когда я создаю новый раздел через единственный css , то у меня все остается прежним, а отвязываю css , делая внутреннее оформление, теряется вся функциональность меню и других блоков. Как мне сделать что бы главная страница работала, а другие страницы могли менять шапку?

Answer 3

[Сергей]

Так минимизируйте один файл и будет он один раз загружаться

Answer 4

[Игорь Пушкарский]

Делить файл смысла нет, только если на разные разделы сайта.
1. Сайт.
2. Админка.
3. PDF.
4. Для печати.
5. Мобильная версия сайта.
6. Левая рука дизайнера.
7. Правая рука дизайнера.

Answer 5

[Глюкъ Виртуален]

Нечего тут дискутировать.

Зайдите файл-менеджером в каталог с тыщей файлов общим весом в несколько мегов. Скопируйте их куда-нибудь, засеките время.
Зайдите в другой каталог с парой файлов с таким же весом. Скопируйте, засеките время.

Вопрос отпал? Проздравляю.

Answer 6

[entermix]

>С другой стороны... css же кэшируется, а значит 1 раз загрузить большой стиль будет лучше?
Но зачем загружать то, что может и не понадобится?

Comments

[entermix]

Rikcon: может быть

Answer 7

[Dmitri Sinitsa]

Зависит от конечного размера полученного файла. Если там что-то около 50-100 кб (ну так чисто эмперически) или менее - забить. Плюс не надо забывать, что можно применить компрессию (uglifier), gzip и т.д, что настраивается, в принципе, очень быстро.
Даже для 2G соединения - это ни о чем, а для веб-браузера перформанс в css никогда не упирается (даже если использовать кривые селекторы, много уровней вложенности и прочие плохие вещи).
Хотя, в идеале, конечно, лучше иметь раздельные, кмк. Но этим надо заниматься в последнюю очередь.

Pro tip :-) : Лучше обратить пристальное внимание на яваскрипты, особенно сторонние. Все фронд-энд тормоза как правило оттуда вылезают.

Answer 8

[Павел]

все ответы хороши НО , сколько же на сайте страниц? Не размер файла решает, а количество запросов, css это ведь маленький файл , даже на 100500 страниц это 1% а то и меньше от всего сайта.
Я думаю если страниц до 10 то файл пусть будет один. Если больше то делите .