@ZipZaper

Как поступить с css в многостраничном сайте?

Вроде как вопрос избитый, но все равно хочется у вас узнать как лучше поступить. Раньше верстал всегда LP и gulp скидывал все sass файлы в один min.css, а сейчас надо сверстать многостраничник и как лучше поступить с css структурой? Вроде бы где-то в ТЗ одного заказа видел требование, чтобы стили на всех страницах были разбиты about.html->about.css и т.д.
Так вот, это норм или лучше все скидывать в один файл?
  • Вопрос задан
  • 1139 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега CSS
Thinking about a11y
В идеальном мире все стили у вас разбиты по группам:
Общие стили -- которые применяются на всех или на связанных страницах сайта. (Макет, какая-то шапка, подвал)
Специфичные -- которые применяются на одной или нескольких конкретных страницах. (Таблица цен на одной странице, или другой макет для админки)

Кроме этого, следует разделять:
Критичные -- самые основные и важные стили, без которых ваш сайт не должен отображаться вообще.
Не критичные -- стили без которых сайт останется доступным.

И в идеальном мире, вам стоит дробить на файлы в соответствии с этим.
Общие стили, пользователь скачает один раз и при повторном посещении сайта или переходе на другие страницы они будут загружаться из кэша что значительно повысит скорость повторной загрузки. Но сильно раздувать этот файл не стоит. И из него стоит выбрасывать всё, что скорее всего пользователю не понадобится.
При посещении какой-то конкретной страницы могут быть дополнительно загружены специфичные стили. Их желательно выносить из отдельно только для того, чтобы уменьшить файл с общими стилями. Например можно вынести стили для страницы "Сбросить пароль", так как предполагается, что во время обычного сеанса эта страница пользователю не понадобится.

Критичные стили. Это всё что касается первоначальной отрисовки. Эти стили загружаются как можно раньше. Они имеют высокий приоритет и блокируют рендеринг страницы. Чем такие файлы меньше тем лучше! Всё что можно загрузить потом -- нужно загружать потом.
Не критичные стили -- это всё остальное.

На пример: Форма. Общие стили формы -- критичный CSS. А стили для отображения условного попапа с подтверждением отправки -- не критичный. В результате, браузер скачивает критичный CSS, отображает страницу, пользователь уже может с ней работать и заполнять форму, а браузер в фоне дозагружает остальной CSS для попапа.

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

Или другой пример. Предположим, что на вашем сайте все страницы достаточно уникальны. В таком случае, разделять "общие" и "специфичные" стили может быть лишним или слишком затратным для поддержки.
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@sewaca
Если планируется натяжка на какой-то движок, то одним файлом будет удобнее, просто добавляй комментарии в код по типу /* About */ и т.д.
Если натяжка не планируется, то лучше делать отдельными файлами. Так и по оптимизации (pagespeed) будет лучше, и верстать удобнее
Ответ написан
Комментировать
BormotunJedy
@BormotunJedy
Верстальщик
На больших проектах логично создавать отдельные файлы стилей. В scss или sass или less, которые потом собираются в один css. Насчет комментариев внутри кода - утяжеляют. Иногда это бывает критично.
Стили уникальных страниц прописываю с одинаковым началом - например, about__ или shop__.
Тогда при сборке уникальные стили страницы идут один за другим и не перекликаются с другими страницами. И править при необходимости такой файл легче.
Alex правильно говорит, по уму все стили еще на стадии подготовки к верстке должны быть разделены на группы.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы