CSS в отдельном файле или нет?
какой вариант лучше: хранить CSS в отдельном файле или на одной странице?
давайте забудем о том, что изменение CSS в файле позволяет применять все HTML-страницы напрямую. Я использую динамические языки для генерации всего вывода - так что это не имеет значения.
несколько вещей, которые я могу придумать:
- CSS в отдельном файле генерирует меньшую нагрузку полосы пропускания.
- CSS в отдельном файле нужен другой HTTP запрос.
с другой стороны, если я сжимаю передачу данных с помощью Zlib, CSS на той же странице не должен иметь значения с точки зрения пропускной способности, правильно? Итак, я получаю один HTTP-запрос меньше?
7 ответов
Если вы генерируете HTML динамически (скажем, из шаблонов), встраивание CSS позволяет вам также генерировать CSS динамически, используя тот же контекст (данные, состояние программы), что и при создании HTML, а не устанавливать тот же контекст снова по последующему запросу для генерации CSS.
для примера рассмотрим страницу, которая использует один из нескольких сотен изображений для фона, в зависимости от состояния, которое дорого вычислять. Вы мог бы!--1-->
- перечислите все несколько сотен изображений в правилах в отдельном статическом файле CSS, затем создайте соответствующее имя класса в динамическом HTML или
- создайте HTML с одним именем класса, затем по последующему запросу создайте CSS с правилом для этого имени, которое использует желаемое изображение, или
- Do (2), но создайте CSS, встроенный в HTML, в одном запросе
(1) избегает переделывать дорогое государство вычисление, но принимает больший удар по трафику (больше пакетов для перемещения гораздо большего файла CSS). (2) выполняет вычисление состояния дважды, но обслуживает меньший файл CSS. Только (3) выполняет вычисление состояния один раз и обслуживает результат в одном HTTP-запросе.
основным преимуществом внешнего файла CSS является то, что:
- его можно использовать на нескольких страницах; и
- его можно кэшировать, поэтому его не нужно загружать на каждую страницу.
Итак, если есть потенциал для повторного использования динамически генерируемого CSS между страницами или на нескольких представлениях одной и той же страницы, то внешний файл может добавить значение.
существует несколько общих шаблонов для динамически генерируемых стиль CSS.
1. Создание подмножества для страницы
Я видел это иногда. Разработчик решает ограничить количество CSS на страницу, отправив только то, что необходимо. Я не думаю, что это так для вас, но я упоминаю об этом для полноты. Это ошибочная попытка оптимизации. Дешевле отправить всю партию и просто эффективно кэшировать ее.
2. Выбранная пользователем тема
если пользователь выбирает особенно ищите свой сайт, вот о чем я говорю. Это означает, что они могут выбрать весь пакет CSS, и может быть ограниченный набор на выбор. Обычно это будет сделано, имея один или несколько базовых файлов CSS, а затем oen или несколько файлов CSS темы. Лучшее решение здесь-отправить правильную комбинацию внешних CSS-файлов, динамически генерируя заголовок страницы с правом <link> элементы, а затем эффективно кэшировать эти файлы.
3. Пользователь-rolled theme
это выходит за рамки (2), где пользователь может выбрать, скажем, цвета, шрифты и размеры до такой степени, что вы не можете упаковать эти варианты в один тематический пакет, но вы должны создать набор CSS для этого пользователя. В этом случае у вас, вероятно, все еще будет общий CSS. Отправьте это как внешние CSS-файлы (опять же, эффективно кэшируя их).
динамический контент может быть лучше всего на странице, или вы все еще можете использовать внешний файлы, потому что нет причин a <link> не может указывать на скрипт вместо статического файла. Например:
<link rel="stylesheet" href="/css/custom.php?user=bob" type="text/css">
где строка запроса генерируется динамически вашим заголовком От того, кто вошел в систему. Этот скрипт будет искать пользовательские настройки и генерировать динамический файл CSS. Это может быть эффективно кэшировано, тогда как его размещение непосредственно в HTML-файле не может быть (если весь HTML-файл не может быть эффективно кэширован).
4. Основанные на правилах Поколения для CSS
Я написал систему отчетности, прежде чем это заняло много правил, указанных пользователем или автором отчета и настраиваемым отчетом, и сгенерировал полную HTML-страницу (на основе таблиц и/или диаграмм, которые они запросили в определении настраиваемого отчета) и стилизовал их в соответствии с правилами. Это действительно был динамический CSS. Дело в том, что здесь тоже есть потенциал для кэширования. HTML-страница генерирует динамическую ссылку следующим образом:
<link rel="stylesheet" href="/css/report.annual-sales.0001.css" type="text/css">
где годовые продажи-это идентификатор отчета и 0001 это как версия. При изменении правил создается новая версия, и каждая версия для каждого отчета может быть эффективно кэширована.
вывод
поэтому я не могу сказать окончательно, подходят ли вам внешние CSS-файлы или нет, но, увидев и разработав для каждого из приведенных выше сценариев, мне трудно поверить, что вы не можете получить какую-то форму кэширования из вашего CSS, в какой момент это должно быть внешний.
Я написал о проблеме эффективного CSS в наддув CSS в PHP но принципы и методы применяются на любом языке, а не только PHP.
вы также можете обратиться к соответствующему вопросу несколько файлов javascript / css: рекомендации?
существует метод, который применяют Google и Yahoo, который выигрывает от встроенного CSS. Впервые посетители ради быстрой загрузки встраивают CSS (и даже JavaScript) в HTML, а затем в фоновом режиме скачивают отдельные CSS и JS файлы на следующий раз.
Стив Соудерс (Yahoo!) пишет следующее:
[... лучшее решение вообще чтобы развернуть JavaScript и CSS как внешний файл. Этот только исключение Я видел, где inlining предпочтительнее с домашними страницами, такими как Yahoo!'s первая страница (http://www.yahoo.com) и Мой Yahoo! (http://my.yahoo.com). Дом страницы, которые имеют несколько (возможно, только один) просмотр страницы за сеанс может обнаружить, что встраивание JavaScript и CSS приводит к более быстрое время отклика конечного пользователя.
браузеры могут кэшировать файлы CSS (если он не меняется много). Пропускная способность не должна меняться, потому что информация отправляется, независимо от того, куда вы ее помещаете.
поэтому, если css не довольно статичен,его размещение на странице стоит меньше времени.
Я всегда использую комбинацию обоих.
- стили для всего сайта находятся в отдельном файле (minified & архив gzip),
- любой странице-стили ставятся в
<style>(Я настроил шаблоны страниц, чтобы было легко вставлять биты CSS в<head>можно в любое время).
да и нет. Использовать .css-файл для большинства правил; ваш сайт должен иметь согласованный вид в любом случае. Для редких, особых случаев или динамически генерируемых правил вы можете использовать встроенный ' style=""'. Все, что прилипает, должно двигаться .CSS, если только сделать transcluding, мэшапы и т. д. облегчающий.