Сравнение загрузки CSS встроенных, встроенных и из внешних файлов - PullRequest
8 голосов
/ 16 марта 2010

Мы можем написать CSS как следующие типы:

  1. Встроенный CSS
  2. Встроенный CSS
  3. Внешний CSS

Я хотел бы знать плюсы и минусы каждого.

Ответы [ 10 ]

11 голосов
/ 16 марта 2010

Все дело в том, где в конвейере вам нужен CSS, как я его вижу.

1. встроенный css

Плюсы: Отлично подходит для быстрых исправлений / создания прототипов и простых тестов без необходимости переключаться между документом .css и настоящим HTML-файлом.

Плюсы: Многие почтовые клиенты НЕ разрешают использовать внешние ссылки .css из-за возможного спама / злоупотребления. Вложение может помочь.

Минусы: Заполняет пространство HTML / занимает полосу пропускания, не может быть пересчитан по страницам - даже IFRAMES.

2. встроенный css

Плюсы: То же, что и выше в отношении прототипа, но его легче вырезать из окончательного прототипа и поместить во внешний файл после создания шаблонов.

Минусы: Некоторые почтовые клиенты не допускают стили в [head], так как большинство веб-почтовых клиентов удаляют заголовки.

3. внешний css

Плюсы: Простота обслуживания и повторного использования на веб-сайтах объемом более 1 страницы.

Плюсы: Кэшируется = меньшая пропускная способность = более быстрая отрисовка страницы после загрузки второй страницы

Плюсы: Внешние файлы, включая .css, могут быть размещены на CDN, и, следовательно, меньше запросов запрашивает брандмауэр / веб-сервер, на котором размещены HTML-страницы (если на разных хостах).

Плюсы: Скомпилированные, вы можете автоматически удалять все неиспользуемое пространство из окончательной сборки, так же как у jQuery есть версия для разработчика и сжатая версия = более быстрая загрузка = более быстрое взаимодействие с пользователем + меньшее использование полосы пропускания = быстрый интернет! (нам нравится !!!)

Минусы: Обычно удаляются из писем HTML = грязный HTML-макет.

Минусы: Делает дополнительный HTTP-запрос на файл = больше ресурсов, используемых в брандмауэрах / маршрутизаторах.

Надеюсь, вы могли бы использовать это?

7 голосов
/ 16 марта 2010

Я собираюсь представить мнение, что внешние таблицы стилей - единственный путь.

  • встроенный CSS смешивает контент с презентацией и приводит к ужасному беспорядку.

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

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

5 голосов
/ 16 марта 2010

Встроенный

Быстро, но очень грязно

Это (к сожалению) также единственный разумный вариант для электронной почты в формате HTML, поскольку другие формы часто отбрасываются различными почтовыми клиентами.

Встроенный

Не требует дополнительного HTTP-запроса, но не имеет преимуществ:

Linked

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

1 голос
/ 16 марта 2010

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

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

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

1 голос
/ 16 марта 2010

Использовать внешний CSS, когда:

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

Внешний CSS значительно облегчает управление вашим CSS и является приемлемым способом реализации стилей.

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

Обычно вы должны использовать встроенный CSS только в том случае, если:

  • Одноразовое форматирование для определенного тега
  • Вы хотите переопределить CSS по умолчанию (установленный снаружи или вверху файла) для определенного тега
1 голос
/ 16 марта 2010

С чего начать !! ??

Скажем, у вас был сайт с 3 страницами ... Вы можете обойтись без Inline CSS (т.е. CSS на самой странице, внутри тегов).

Если у вас был веб-сайт на 100 страниц ... Вы бы не хотели менять CSS на каждой странице отдельно (или не так ли?!) ... Поэтому включение внешнего CSS-листа было бы лучшим вариантом.

1 голос
/ 16 марта 2010

Вы хотите внешний CSS. Это проще всего поддерживать, внешний CSS также упрощает кэширование. Внедренный означает, что каждый отдельный HTML-файл должен иметь свой собственный CSS, что означает больший размер файла и много головной боли при изменении CSS. Встроенный CSS еще сложнее поддерживать.

Внешний CSS - это путь.

0 голосов
/ 27 ноября 2015

Всем здесь и сейчас, читая после 2015 года, с такими проектами, как Полимер , Browserify , Webpack , Babel , и многие другие важные участники, которых я, вероятно, скучаю, вступили в новую эру написания HTML-приложений в отношении того, как мы модулируем большие приложения, распределяем изменения и объединяем связанные представления, разметку и поведение в автономные блоки. Давайте даже не начинать с работниками сферы обслуживания.

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

0 голосов
/ 15 июня 2013

Если вы используете серверный язык, почему бы не встроить CSS и использовать условное программирование для отображения его по мере необходимости? Например, предположим, что вы используете PHP с Wordpress и вам нужен CSS для определенной домашней страницы; Вы можете использовать функцию is_home (), чтобы показать свой CSS в заголовке документа только для этой страницы. Лично у меня есть своя собственная система шаблонов, которая работает так:

inc.header.php = все содержимое заголовка, и куда я могу добавить CSS для конкретной страницы:

if(isset($CSS)) echo $CSS;

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

Содержание about.php:

<?php

$CSS = <<< CSS

.about-us-photo-box{
/* CSS code */
}

.about-us-something-else{
/* more CSS code */
}
CSS;

include "inc.header.php"; // this file includes if(isset($CSS)) echo $CSS; where page-specific CSS would go ...

<body>

<!-- about us html -->

include "inc.footer.php";

?>

Есть ли что-то, чего мне не хватает, что делает этот подход хуже?

Плюсы:

1) Я все еще могу кэшировать страницу, используя стандартные методы кэширования (есть ли метод кэширования, который использует преимущества только внешнего CSS-файла ??).

2) Я могу использовать php для условного форматирования в особых случаях в определенных объявлениях классов, если это абсолютно необходимо (PHP не работает в файле CSS, если я не пропустил какую-либо серверную директиву, которую я мог бы установить).

3) Весь CSS для моей страницы чрезвычайно хорошо организован в реальном файле PHP, в котором он используется.

4) Сокращает HTTP-запросы к внешним файлам.

5) Сокращает запросы сервера к внешним файлам.

Минусы:

1) Моя программа IDE (Komodo IDE) не может использовать форматирование Heredoc для правильного выделения CSS, что затрудняет отладку синтаксических ошибок в CSS.

2) Я действительно не вижу другого мошенника, пожалуйста, просветите меня!

0 голосов
/ 18 апреля 2013

Плюсы:

Позволяет управлять макетом всего сайта одним файлом. Изменения влияют на все документы одновременно. Может устранить избыточные встроенные стили (шрифт, полужирный, цветной, изображения) Предоставить несколько просмотров одного и того же контента для разных типов пользователей.

Минусы:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...