Один файл CSS или отдельные файлы CSS для каждой страницы?

Question

Когда я создаю страницы, хочу ли я иметь отдельные таблицы стилей для каждой страницы или одну большую таблицу стилей для всего сайта? Для целей загрузки, не лучше ли использовать отдельные файлы, потому что это будет меньше общего CSS при загрузке?

Answer 1

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

Чтобы помочь, я обычно беру свой CSS с помощью CSS cleaner , чтобы уменьшить размер его файла, кроме того, вы также можете GZip CSS, используя .htaccess , делая его еще меньше.

Наконец, размещение всего CSS в одном файле в будущем облегчит внесение изменений в презентацию в масштабе всей системы (в первую очередь по этой причине мы используем CSS), а также упростит отладку.

Редактировать, май 2017 г.

За последние 7 с лишним лет многое изменилось, и всем, кто ищет этот ответ, следует рассмотреть вопрос о поиске новых методов доставки активов, особенно в настоящее время использование HTTP2 и препроцессоров стало более распространенным явлением.

Answer 2

Другое предложение, использовать несколько таблиц стилей во время разработки и иметь механизм, который объединит все таблицы стилей в один файл CSS для производственного развертывания. Это может потребовать некоторого дополнительного кодирования и некоторых дополнительных сценариев для запуска перед производственным развертыванием, но было бы идеально как для разработки, так и для производственного использования. Если процесс правильно автоматизирован (что не очень сложно достичь), это также не вызовет никаких ошибок.

Answer 3

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

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

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

Answer 4

Основная цель таблицы стилей - позволить вам изменить дизайн на всех ваших страницах. Если у вас есть h1 {color:red;} на каждой странице, а затем вы хотите изменить его на синий, вам придется редактировать таблицу стилей каждой страницы. С помощью одной таблицы стилей вы сможете изменить цвет и отразить его на всем сайте.

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

Answer 5

"Для целей загрузки, не хотите ли вы меньшую таблицу стилей, поэтому создание индивидуальных таблиц - это лучшая практика?"

Это может иметь обратный эффект, поскольку при использовании 1 таблицы стилей ее можно кэшировать, а затем легко загружать, в то время как она постоянно загружает новый файл CSS для каждой страницы с помощью вашего метода.

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

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

Answer 6

Я наткнулся на эту тему, ища тот же вопрос .. Моя мысль была структурировать как это ..

Layout.css <--- для структуры сайта, ссылок, заголовков и т. Д., Которые являются общими для всего сайта. form.css <- универсальные стили форм reset.css <- все документы сбрасываются, если вы их используете </p>

и в настоящее время я использую pages.css для всех стилей страницы ..

или

homepage.css about.css gallery.css

Answer 7

Поскольку я на самом деле настоящий веб-программист (Java-программист, а не скрипты, такие как PHP), я должен дать вам мнение, что никогда не видел ни одного реального веб-сайта дизайнер дает:

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