Один CSS файл или несколько на сайт?

Question

[Teo Mart]

Выгуглить нормально не смог. Как делаете вы? Нашел несколько вариантов:
1. Для каждой страницы по CSS.
2. Для каждой страницы по CSS, но к каждой странице подключается не он, а сборщик, который их сливает. Какие есть сборщики? Насколько удобно их использовать?
3. Один CSS на все страницы. Через что оптимизировать? После оптимизации насколько удобно такой код поддерживать?
4. Один CSS для общих стилей (для хедера и футера, модальных окон и тэдэ), для специфического содержания еще один CSS файл - итого два.
Еще кто-то писал про препроцессоры - чем они могут помочь? Какие еще есть варианты?
Не знаю как лучше сделать.

Comments

[Александр]

https://zellwk.com/blog/how-to-write-mobile-first-css/

[Сергей delphinpro]

Выгуглить нормально не смог.

Ну хоть врать-то не надо. Просто скажи "мне лень гуглить, раскажите в тысячный раз, как нужно делать".

https://yandex.ru/search/?text=Один%20CSS%20файл%2...

Answer 1

[Serj-One]

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

По файлу на каждую страницу - полный бред. Псевдооптимизация, не дающая значимого прироста в скорости загрузки.

Comments

[Teo Mart]

А чем сливать файлы? Препроцессором типа sass?

[Serj-One]

Teo Mart, да, импорт всех файлов в один главный, и его автокомпиляция при изменении любого.

[Алексей Уколов]

Один общий файл инвалидиируется в кеше при каждом чихе и клиенту нужно заново качать всё. Это значительно влияет на скорость загрузки и не является псевдооптимизацией.

Answer 2

[Сергей]

Как по мне, наиболее предпочтительным является использование одного css-файла. Почему? Во-первых, 1 файл = 1 http-запрос к серверу (чем меньше запросов, тем быстрее грузится страница). Во-вторых, при первом посещении сайта css-файл закешируется, и при переходе на другие страницы, раз этот файл общий для всех, не придётся грузить никакие стили. В-третьих, меньше мороки с тем, куда какие файлы подключать.
Ну и напоследок, если вы интересуетесь оптимизацией загрузки веб-страниц, то посмотрите в сторону critical css - когда стили первого экрана (то есть той секции, которая возникает перед глазами пользователя сразу при загрузке) выносятся непосредственно в html-разметку, способствуя более быстрой отрисовке веб-страницы.

P.S. На этапе разработки стили, относящиеся к конкретной секции/странице, для удобства лучше держать в отдельных файлах (тут на помощь приходят препроцессоры либо postcss), а затем для продакшена собирать их с помощью сборщика в единый css.

Comments

[Programmir]

Тоже использую один файл. Просто комментирую блоки. Зачем использовать несколько файлов мне непонятно.

Answer 3

[Алексей Уколов]

Как делаете вы?

Один файл с общими стилями всего проекта, ещё один с общими стилями раздела (шапка, подвал, специфические стили админки и т.п.) и ещё один файл со стилями специфичными для страницы.
Если настроено HTTP/2, то последний файл можно заменить россыпью файлов каждого блока со страницы. Но нужно замерить производительность такого подхода в каждом конкретном случае.

к каждой странице подключается ... сборщик, который их сливает

Какой ещё такой сборщик?

Через что оптимизировать?

Через что хотите.

После оптимизации насколько удобно такой код поддерживать?

Поддерживаете вы неминимизированные исходники, поэтому настолько же, насколько и до.

препроцессоры - чем они могут помочь?

Прочитайте любую статью про препроцессоры, там всё объясняется.

Answer 4

[Антон Плашкевич]

Использую препроцессор sass, для каждой страницы отдельный sass , и конверчу это все в 1 css, на данный момент хватает

Answer 5

[Danny Chase]

1. Отличный Вариант будет очень просто искать где расположены стили и работать с ними.
2. Не зависит от первого варианта и если стилей много то юзать сборщик must have на вас это все равно не отразится при работе у вас будут те же файлы для каждой страницы.
3. Плохая идея - может случиться конфликт стилей и будет трудно в них ориентироваться
4. Если есть laouyts такие как хедер футер сайдбар etc то конечно лучше выделить для них свой а не подключать каждый раз заново один и тот же файл

Итак каноничная схема.
Выделяем стили шаблонов в отдельный файл.
Для каждой страницы пишем свои стили
Под конец минифицуруем это все например через GULP

профит

Answer 6

[Александр]

Ну, например, самый часто используемый вариант:

• исходные стили пишутся в разных файлах, при этом используется препроцессор (чаще всего SASS и SCSS);
  
• используется сборщик, который при сборке собирает все SCSS файлы воедино и превращает их на выходе в один CSS, который потом просто подключается к странице;
  
• вдобавок к этому, сборщик составляет карту (MAP-файл), которая помогает при отладке, а если она не нужна, то её можно просто удалить.
  

Answer 7

[brHuman]

Все зависит от случая. Если вы сейчас делаете простые проекты, то советую попробовать по-разному. Со временем вы сами почувствуете разницу и удобства разных способов. Так как нет идеального и универсального решения.

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

Answer 8

[profesor08]

Лучше 1 запрос на 100кб, чем 10 по 10кб. В результате, ни одна последующая страница не будет загружать ничего для себя, а значит откроется максимально быстро. И надо помнить, если много файлов стилей, то неизбежно они будут загружаться не по порядку, а значит стили будут применяться к странице по мере загрузки, что приводит к изменению отображению элементов прямо на глазах пользователя.