@Teodor_Draizer

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

Выгуглить нормально не смог. Как делаете вы? Нашел несколько вариантов:
1. Для каждой страницы по CSS.
2. Для каждой страницы по CSS, но к каждой странице подключается не он, а сборщик, который их сливает. Какие есть сборщики? Насколько удобно их использовать?
3. Один CSS на все страницы. Через что оптимизировать? После оптимизации насколько удобно такой код поддерживать?
4. Один CSS для общих стилей (для хедера и футера, модальных окон и тэдэ), для специфического содержания еще один CSS файл - итого два.
Еще кто-то писал про препроцессоры - чем они могут помочь? Какие еще есть варианты?
Не знаю как лучше сделать.
  • Вопрос задан
  • 3799 просмотров
Пригласить эксперта
Ответы на вопрос 8
Serj-One
@Serj-One
i'm sexy and i know it
В исходниках для удобства отдельные файлы для страниц, секций, блоков или даже элементов.
На выходе 1 общий минифицированный и оптимизированный файл на все страницы.

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

P.S. На этапе разработки стили, относящиеся к конкретной секции/странице, для удобства лучше держать в отдельных файлах (тут на помощь приходят препроцессоры либо postcss), а затем для продакшена собирать их с помощью сборщика в единый css.
Ответ написан
alexey-m-ukolov
@alexey-m-ukolov Куратор тега CSS
Как делаете вы?
Один файл с общими стилями всего проекта, ещё один с общими стилями раздела (шапка, подвал, специфические стили админки и т.п.) и ещё один файл со стилями специфичными для страницы.
Если настроено HTTP/2, то последний файл можно заменить россыпью файлов каждого блока со страницы. Но нужно замерить производительность такого подхода в каждом конкретном случае.

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

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

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

препроцессоры - чем они могут помочь?
Прочитайте любую статью про препроцессоры, там всё объясняется.
Ответ написан
Комментировать
@antowa_plawkevich
Junior Front-end developer
Использую препроцессор sass, для каждой страницы отдельный sass , и конверчу это все в 1 css, на данный момент хватает
Ответ написан
Комментировать
Dase23
@Dase23
back-end developer
1. Отличный Вариант будет очень просто искать где расположены стили и работать с ними.
2. Не зависит от первого варианта и если стилей много то юзать сборщик must have на вас это все равно не отразится при работе у вас будут те же файлы для каждой страницы.
3. Плохая идея - может случиться конфликт стилей и будет трудно в них ориентироваться
4. Если есть laouyts такие как хедер футер сайдбар etc то конечно лучше выделить для них свой а не подключать каждый раз заново один и тот же файл

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

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

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

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

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