Что лучше — общий всё-в-одном style.css или несколько файлов .css?

Question

[Sharapov]

Несколько файлов удобней, но не снизит ли это скорость загрузки и рендеринга страниц?

Answer 1

[Ivan Stroykin]

Влияет. Каждый файл это дополнительный запрос.
Но раскидывая стили по файлам удобнее за ними следить и править.
Что же делать? Правильно. Раскидывать по файлам, и работать с ними. А при загрузке на сервер пропускать через сборщик проектов (к примеру gulp), который объединит все css файлы в один, а так же сожмет их

Answer 2

[Pretor DH]

С переходом на протокол HTTP2 держать файлы раздельно даже на сервере будет лучше. Не будет разницы, ибо пакетироваться они будут на уровне протокола.

Но даже сейчас лучше разделить стили блочной разметки от украшательств и грузить их раздельно. Подключать media queries CSS, не в CSS а в HTML отдельными файлами, указанием атрибута media:

<link rel="stylesheet" media="all and (min-color-index: 256)" href="..." />

А ещё лучше, подключать с каждой страницей только те стили, которые на ней используются :)

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

• Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
  
• Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
  
• Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
  
• Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.
  

P.S. Уточню по Основной таблице стилей фактически сборок должно быть минимум 6 (мобильная, планшетная, малая, средняя, ретина, печатная).
Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать атрибутом media по надобности. Сборка в порядке возрастания сначала узкоспециализированная таблица для мобильников. Для планшетников подключается только отдельный файл с планшетной и мобильной таблицами стилей собранные в кучу. И так далее...

P.P.S. Cборщики (gulp) собирающие в один файл, это посредственное решение в лоб грубой силой, дабы не заморачиваться.

Comments

[Елена]

То есть теперь разницы нет разделять на файлы или нет?
Я вот думаю между одним общим для всех страниц или же одним с общими стилями для всех и по одному индивидуальному для каждой, подключать, разумеется, в шапке, в итоге по два файла css на стр в шапке. Мне советовали все в одном. Но с другой стороны, если стр много, то получится невероятно огромный файл, который будет неудобно править, и который все равно будет грузится в память весь. А что, если пользователь не уйдет дальше главной? Или будет посещать только пару избранных стр?

[Pretor DH]

Все-таки, в большинстве случаев, разделяются файлы для удобства разработчика.

Если у вас нормальный бекенд то на счет объединения он определится сам. Если http2 - то не будет обьединять вообще, а если http - то объединит соответственно странице.

Ленивый бекендщик этого не сделает, будет ссылаться на то что есть другие более важные задачи. И в итоге так и никогда и не сделает это. Поставит общую "объединялку" и все!

Чтобы это можно было сделать, верстальщик должен сделать раздельные сборки:

• Стартовую таблицу стилей которая грузится на всех страницах. Сюда входят: сброс браузеров, хеадер, футер (если он fixed внизу видимого), стили видимого при загрузке домашней страницы. ТОЛЬКО то, что видно на самом большом экране без элементов которые появляются во время прокрутки.
  
• Основную таблицу стилей для разметки страниц контента. То что входит во все страницы контента, без специфичности. Ну и не фиксированный футер тот, что после контента. Эти стили должны быть загружены уже после загрузки основного контента.
  
• Специфичные стили для отдельных страниц. Эти грузятся отдельно на каждой странице свои стили и по надобности объединяются с Основной разметкой контента.
  
• Таблица стилей форм. Все формы на сайте должны грузится с одной таблицы. А не быть специфичными для разных страниц. Формы это не контент!!! У форм ОБЯЗАТЕЛЬНО должна быть отдельная таблица стилей. Она подключается при включении формы генератором форм на бекенде. Даже строка поиска в хедере. Все элементы input, textarea, option должны быть описаны в отдельной таблице стилей. Эти стили объединяются с основной или стартовой таблицей как будет надо.
  

P.S. Уточню по Основной таблице стилей.
Верстка ВСЕГДА должна быть мобайлфёрст. И сновная таблица должна быть на мобильной версии сайта. А потом ёё расширять и естественно подключать по надобности.

[Елена]

Pretor DH, как раз об этом и писала я, что файл с общими стилями один + на каждую стр свой только со стилями для этой стр. Хотя сообщение может и удалили мое. Смотрю, тут все почистили.

Не поняла зачем выносить формы отдельно. И о каком генераторе форм на бэкэнде идет речь? Особенно, если это ленд без бэкэнда. И что, если дизайнер нарисовал разные формы под разные версии сайта? Как тут быть?

P.S. Насчет мобайл мнения разные. Я считаю, что это должно зависеть от сайта и аудитории. Кому-то мобильная нужна, чтобы просто была. А кому-то только она и нужна (был один сайт, где просили в первую очередь мобильную из-за того, что весь трафик на сайте шел с инстаграма). Но вообще способ неудобный. И я бы не стала утверждать, что надо только так и не иначе, потому что подходов много, и у каждого свой. И для каждого отдельного случая он может быть свой. И вообще... а что если нет мобильной версии у сайта? А что если это резина? Кто вообще сказал, что надо именно так верстать? На практике у меня ни разу не было такого, чтобы скинули все макеты сразу. Всегда сначала дают декстоп, а потом ждешь мобильную. Но последняя время верстала и вовсе без макета мобильной версии, то есть сама ее делала, опираясь на декстоп. Ну и как тут верстать мобайлферст? Без макета это невозможно.

[Pretor DH]

Елена, Если это ленд без бекенда, то здесь подход слегка упрощенный. Разделяем только на 2 файла стилей. Тот который грузится для быстрого отображения начала страницы. И другой для всего остального. Формы тогда тоже уже склеены с стартовой таблицей. Только их визуальное оформление уже допиливается в основном.

На счет мобайл фёрст. Логика проста: на мобильном ограничен трафик, по этому делаем все, что бы уменьшить трафик. А для этого делаем начальную таблицу стилей для него. А потом для всего остального через медиа запросы. Тут других подходов быть не может.

Дело в том, что строить дом нужно с фундамента, а не с крыши. Построить получится, но с какими манипуляциями приходится иметь дело. Все упирается во время, а время упирается во деньги. Если заказчик платит за анальное удаление гланд. Не вопрос. Но на практике удобнее и быстрее использовать ректальное.

И мы всегда предупреждаем заказчика, что последовательность разработки определяем мы, а не он. Или тогда он платит почасовку которая в итоге получается в 2, а то и 3 раза выше... С одной стороны заказы реже приходится искать. А с другой стороны: эта анальная трахеотомия как-то выматывает, и прицел сбивает.

P.S. А мы кроме резиной я иначе не делаю. Ибо в итоге приходит момент когда заказчик зВОНИТ, что на каком-то устройстве его ДРАГОЦЕННЫЙ сайт не работает. Или все поплыло...

Answer 3

[Сергей]

Это зависит от вашего уровня знаний и умений.
Сначала вы будете делать CSS-стили внутри HTML-файла.
Потом вы будете делать отдельный файл .CSS.
Потом вы подключите CSS-помогайки, например, reset.css и у вас будет несколько CSS. Я сейчас именно на этом этапе.
Потом вы начнёте использовать сборщики.
Потом вы будете всё это разумно комбинировать.
Удачи.

Comments

[Елена]

Не знаю, кто так делает даже с самого начала. Но с первой верстки сразу же: 1) прописывала стили в css файле, 2) использовала reset, который также вставила в этот же файл стилей в самое начало, 3) использовала медиа-запросы. Это если одностраничник. А если страниц много, то можно для каждой страницы свой файл стилей для этой стр + общий с общими элементами для всех страниц (типа шапки и футера). На каждой странице тогда будет подключено всего 2 файла стилей. Но это хорошо, когда не юзаешь cms, типа modx, где скорее всего будет один общий шаблон с общей шапкой с меню и на все страницы, хотя и здесь можно сделать разные шаблоны.

Если честно, то в данный момент тоже ищу ответ на этот вопрос, как лучше - один файл стилей на все стр, или же как написала выше - для каждой стр свой + один общий. Тоже касается вопроса с медиа-запросами. Видела, что их разделяют на разные файлы, хотя как по мне, то лучше в одном все держать. :-)

Мнения знакомых верстальщиков и font-end, увы, расходятся в этом вопросе. Конечно, удобнее по разным раскидать, если страниц 10+, а если 2-3, то разницы особой нет.

Answer 4

[trevoga_su]

не снизит
css и js надо разделять. на каждый шаблон - свой css и js
совсем общие стили и скрипты - выносим в common.css и common.js

если не разделять, то потом не разберешься в этом хаосе

Comments

[Kirill Sharonov]

Пишешь на SASS/LESS/etc и делаешь удобную структуру для взаимодействия с этими файлами -> компилируешь весь хлам в единую кучу одного css файла с минификацией и сжатием -> не паришься, что невозможно разобраться в хаосе, ведь ты юзаешь SASS/LESS/etc.

[Pretor DH]

Кирилл: Грузить с каждой страницей только нужные стили, согласно шаблока, с единой кучи не получится. Так как большинство пишут SASS/LESS будет много лишних стилей и повторений одних и тех же стилей только в разных родителях. Меня всегда удивляло, как можно накомпилить >5000 строк CSS тогда когда написаное руками занимает меньше 1000.

[Eastar]

Pretor DH: Я не очень понимаю смысл всего, разве браузер не закеширует стили, хоть один, хоть 10 файлов? И это все имеет смысл только для первой загрузки? Кто-нибудь измерял на сколько изменится скорость загрузки, если я оставлю читаемый, а не сжатый CSS?

[Pretor DH]

Eastar: Так и есть. Это все перфекционизм, но он иногда нужен когда делается большой проект. С перспективой ещё большего роста. Да меряли эту скорость 100 500 раз, стараются добиться даже уменьшения на 10ms когда страница грузится 100ms. Главный вопрос не на стороне браузера, как думают начинающие, а на стороне сервера. Для больших проектов с посещаемостью 500 000 в день, эти 10 ms вылазят в общем в 1.4 часа/сутки лишней работы сервера.

[Pretor DH]

Eastar: Если у вас на обслуживании 100 сайтов то 1.4 часа это усредненно ещё 500 посещений каждого сайта.