Сравнение загрузки CSS, встроенного, встроенного и из внешних файлов
Мы можем записать CSS как следующие типы:
- Встроенный CSS
- Встроенный CSS
- Внешний CSS
Я хотел бы знать за и против каждого.
7 ответов
Все дело в том, где в конвейере вам нужен CSS, как я его вижу.
1. встроенный css
Плюсы: Отлично подходит для быстрых исправлений / создания прототипов и простых тестов без необходимости переключаться между документом .css и фактическим файлом HTML.
Плюсы: Многие почтовые клиенты НЕ позволяют использовать внешние ссылки .css из-за возможного спама / злоупотреблений. Встраивание может помочь.
Минусы: Заполняет пространство HTML / занимает полосу пропускания, не восстанавливается на всех страницах - даже не на IFRAMES.
2. встроенный css
Плюсы: То же, что и выше, относительно прототипа, но легче вырезать из окончательного прототипа и поместить во внешний файл, когда шаблоны готовы.
Минусы: Некоторые почтовые клиенты не позволяют использовать стили в [head], так как заголовочные теги удаляются большинством почтовых клиентов.
3. external css
Плюсы: Простота обслуживания и повторного использования на веб-сайтах с более чем одной страницей.
Плюсы: Возможность кэширования = меньшая пропускная способность = более быстрая отрисовка страницы после загрузки второй страницы
Плюсы: Внешние файлы, включая .css, могут быть размещены на CDN и, таким образом, уменьшают количество запросов к брандмауэру / веб-серверу, на котором размещается HTML-страницы (если на разных хостах).
Плюсы: Компилируемый, вы можете автоматически удалить все неиспользуемое пространство из окончательной сборки, точно так же, как jQuery имеет версию для разработчиков и сжатую версию = более быстрая загрузка = более быстрое взаимодействие с пользователем + меньшее использование полосы пропускания = более быстрый Интернет! (нам нравится !!!)
Минусы: Обычно удаляется из писем HTML = беспорядочный макет HTML.
Минусы: Создает дополнительный HTTP-запрос для каждого файла = больше ресурсов, используемых в межсетевых экранах / маршрутизаторах.
Надеюсь, вы могли бы использовать кое-что из этого?
Я собираюсь представить мнение, что внешние таблицы стилей - единственный выход.
встроенный CSS смешивает контент с презентацией и приводит к ужасному беспорядку.
встроенный CSS загружается с каждым запросом страницы, изменения не могут быть распределены между страницами, а содержимое не может быть кэшировано.
Я не имею ничего против любого метода как такового, но если вы планируете новый сайт или приложение, вы должны спланировать использование внешних таблиц стилей.
С чего начать !! ??
Допустим, у вас был сайт с 3 страницами ... Вы могли обойтись без встроенного CSS (т.е. CSS на самой странице внутри тегов).
Если бы у вас был 100-страничный веб-сайт ... Вы бы не хотели изменять CSS на каждой странице отдельно (или не могли бы?!) ... Поэтому включение внешнего CSS-лист был бы лучше.
Inline CSS вообще плохо. Гораздо проще изменять стиль страницы, когда все стили находятся в одном центральном месте, чего не дает встроенный CSS. Он удобен для быстрого создания прототипов стилей, но не должен использоваться в производстве, особенно потому, что это часто приводит к дублированию стилей.
Встроенный CSS централизует стили для страницы, но не позволяет обмениваться стилями между страницами без копирования текста встроенного стиля и вставки его на каждую отдельную страницу вашего сайта.
Внешний CSS - это то, что нужно, он имеет все преимущества встроенного CSS, но позволяет обмениваться стилями на нескольких страницах.
Используйте внешний CSS, когда:
- у вас много кода CSS, который сделает ваш файл беспорядочным, если вы поместите его в строку
- , как хотите для поддержания стандартного внешнего вида на нескольких страницах
Внешний CSS значительно упрощает управление вашим CSS и является общепринятым способом реализации стилей.
Если стили нужны только для одного файла, и вы не предвидите, что их когда-либо изменят для применения к другим страницам, вы можете поместить свой CSS в начало файла (встроенный?).
Обычно вам следует использовать встроенный CSS, только если:
- Это однократное форматирование для определенного тега.
- Вы хотите переопределить CSS по умолчанию (установленный извне или вверху файла) для определенного тега
Inline
Быстро, но очень грязно
Это (к сожалению) также единственный действительно разумный вариант для электронной почты в формате HTML, поскольку другие формы часто получают отбрасываются различными почтовыми клиентами.
Встроенный
Не требует дополнительного HTTP-запроса, но не имеет следующих преимуществ:
Связанный
Может кэшироваться, повторно использоваться между страницами, легче проверяться с помощью валидаторов.
Вам нужен внешний CSS. Его проще всего поддерживать, внешний css также упрощает кеширование. Встроенный означает, что каждый отдельный файл html должен иметь собственный CSS, что означает больший размер файла и множество головных болей при изменении CSS. Встроенный CSS еще сложнее поддерживать.
Внешний css - лучший вариант.