Лучший способ включить CSS? Зачем использовать @import?

288

В основном мне интересно, каково преимущество / цель использования @importдля импорта таблиц стилей в существующую таблицу стилей по сравнению с простым добавлением другой ...

<link rel="stylesheet" type="text/css" href="" />

в голову документа?

Сообщество
источник
14
Переносимость - это первое, что приходит на ум. Если вы хотите включить набор CSS-файлов на различных страницах, проще и удобнее обслуживать ссылки на один CSS-файл на каждой странице, а не на 5.
xbonez
1
@xbonez: Тем не менее, в большинстве таких ситуаций будет задействовано значительное количество других распространенных HTML, поэтому обычно лучше просто связать обе таблицы стилей в шаблоне.
duskwuff -неактивный-
6
В старые добрые времена @import был удобен для поддержки как «хорошего» браузера (Netscape 4, IE5), так и плохого браузера (IE3, N3). В наше время это почти бесполезно.
mddw
4
<ссылка> является недействительным элементом в HTML5 , так .. Вы можете использовать его без косые черты, как, <link rel="stylesheet" type="text/css" href="theme.css">.
Константин Ван

Ответы:

334

С точки зрения скорости страницы, @importфайл CSS почти никогда не должен использоваться, поскольку он может предотвратить одновременную загрузку таблиц стилей. Например, если таблица стилей A содержит текст:

@import url("stylesheetB.css");

тогда загрузка второй таблицы стилей может не начаться, пока не будет загружена первая таблица стилей. Если, с другой стороны, обе таблицы стилей упоминаются в <link>элементах главной HTML-страницы, они могут быть загружены одновременно. Если обе таблицы стилей всегда загружаются вместе, полезно также объединить их в один файл.

Иногда бывают ситуации, когда @importэто уместно, но они, как правило, являются исключением, а не правилом.

сумеречный
источник
46
There are occasionally situations where @import is appropriateКак использовать @mediaдля применения разных стилей для разных устройств.
Дерек 朕 會 功夫
50
Другой причиной может быть добавление @importшрифта Google в таблицу стилей (например @import url(http://fonts.googleapis.com/css?family=Archivo+Narrow);), чтобы вам не приходилось вставлять linkкаждую страницу с помощью этой таблицы стилей.
Кайорстманн
28
Для тех, кому интересно: одно из моих любимых применений @import- это когда у вас есть процесс сборки, настроенный с использованием чего-то подобного grunt-concat-css. Во время разработки @importоператоры работают и скорость загрузки страницы не имеет значения. Затем, когда вы создаете продукт, подобный инструмент объединит все ваши CSS-файлы и удалит @import. Я делаю аналогичную вещь с использованием моих файлов JavaScript grunt-browserify.
Брэндон
3
@Derek 朕 會 功夫 Если вы используете @importдля применения определенных стилей устройства, почему бы просто не использовать <link>тег с атрибутом медиа?
Йомар Севильо,
1
@MuhammedAsif Нет причин, почему @importбы быстрее. Вы, вероятно, смотрите на какой-то артефакт измерения.
duskwuff -неактив-
185

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

1. Если вам нужна таблица стилей, которая зависит от другой, используйте @import. Сделайте оптимизацию в отдельном шаге.

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

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

(Когда такая зависимость возникнет? На мой взгляд, это довольно редко - обычно достаточно одной таблицы стилей. Однако, есть несколько логических мест для размещения вещей в разных файлах CSS :)

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

Обычно таблицы стилей независимы, поэтому разумно включать их все, используя <link href>. Однако, если они являются зависимой иерархией, вы должны делать то, что имеет наиболее логичный смысл.

Python использует импорт; C использует включают в себя; JavaScript требует. CSS имеет импорт; когда вам это нужно, используйте его!

2. Как только вы дойдете до точки, где сайт должен масштабироваться, объедините все CSS.

Многочисленные запросы CSS любого типа - либо по ссылкам, либо через @imports - плохая практика для высокопроизводительных веб-сайтов. Как только вы окажетесь в точке, где оптимизация имеет значение, весь ваш CSS должен проходить через минификатор. Cssmin объединяет операторы импорта; как указывает @Brandon, у grunt также есть несколько вариантов для этого. ( См. Также этот вопрос ).

Когда вы находитесь на минимизированном этапе, <link>быстрее, как указывали люди, так что, по большей части, делайте ссылки на несколько таблиц стилей и не импортируйте @, если это вообще возможно.

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

Крис
источник
37
+1 за то, что вы играете «плохого парня», делая действительно очки, которые способствуют более широкому взгляду на предмет.
harogaston
«Многочисленные запросы CSS любого типа - либо по ссылкам, либо через @imports - плохая практика для высокопроизводительных веб-сайтов». это не плохая практика при использовании HTTP / 2 из-за мультиплексирования.
Gummiost
13

Лучше НЕ использовать @importдля включения CSS на странице по соображениям скорости. Смотрите эту прекрасную статью, чтобы узнать, почему нет: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Кроме того, часто сложнее минимизировать и комбинировать CSS-файлы, которые обслуживаются с помощью тега @import, поскольку сценарии Minify не могут «отделить» строки @import от других CSS-файлов. Когда вы включаете их как теги <link, вы можете использовать существующие модули minify php / dotnet / java для минимизации.

Итак: используйте <link />вместо @import.

Коэн Петерс
источник
1
Например, если вы используете grunt, вы также можете воспользоваться @import, используя объединение. Затем импортируется таблица стилей, что делает ее единой. Что для меня, чтобы получить лучшее из обоих миров.
Бьорсиг
11

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

импорт загружает любые дополнительные CSS-файлы один за другим (медленнее) и может дать вам Flash Of Unstyled Content

Маугли
источник
8

@Nebo Iznad Mišo Grgur

Ниже приведены правильные способы использования @import.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

источник: https://developer.mozilla.org/en-US/docs/Web/CSS/@import

BBagi
источник
7

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

Я также согласен с комментариями xbonez в том, что переносимость и ремонтопригодность являются дополнительными преимуществами.

Трэвис Дж
источник
3

Они очень похожи. Некоторые могут утверждать, что @import более удобен в обслуживании. Однако каждый @import будет стоить вам новый HTTP-запрос так же, как при использовании метода «link». Так что в контексте скорости это не быстрее. И, как сказал duskwuff, он не загружается одновременно, что является падением.

Крис Холленбек
источник
3

Одно из мест, где я использую @import, - это когда я делаю две версии страницы, английскую и французскую. Я создам свою страницу на английском языке, используя main.css. Когда я создаю французскую версию, я буду ссылаться на французскую таблицу стилей (main_fr.css). В верхней части французской таблицы стилей я импортирую файл main.css, а затем переопределю конкретные правила только для тех частей, которые мне нужны, во французской версии.

BBagi
источник
3

Цитируется по адресу http://webdesign.about.com/od/beginningcss/f/css_import_link.htm.

Основная цель метода @import - использовать несколько таблиц стилей на странице, но только одну ссылку в вашем <head>. Например, корпорация может иметь глобальную таблицу стилей для каждой страницы сайта с подразделами, имеющими дополнительные стили, которые применяются только к этому подразделу. Связываясь с таблицей стилей подраздела и импортируя глобальные стили в верхней части этой таблицы стилей, вам не нужно поддерживать гигантскую таблицу стилей со всеми стилями для сайта и каждого подраздела. Единственное требование - любые правила @import должны предшествовать остальным правилам стиля. И помните, что наследование все еще может быть проблемой.

Вишнурай В
источник
3

Иногда вам нужно использовать @import вместо встроенного. Если вы работаете над сложным приложением, которое имеет 32 или более CSS-файлов, и вы должны поддерживать IE9, выбора нет. IE9 игнорирует любой файл CSS после первых 31, и это включает и встроенный CSS. Однако каждый лист может импортировать еще 31.

деревенщина
источник
3

Есть много хороших причин для использования @import.

Одной из веских причин использования @import является кросс-браузерный дизайн. Импортированные листы, как правило, скрыты от многих старых браузеров, что позволяет применять специальное форматирование для очень старых браузеров, таких как Netscape 4 или более ранняя серия, Internet Explorer 5.2 для Mac, Opera 6 и старше, а также IE 3 и 4 для ПК.

Для этого в вашем файле base.css может быть следующее:

@import 'newerbrowsers.css';

body {
  font-size:13px;
}

В импортированном пользовательском листе (newerbrowsers.css) просто примените более новый каскадный стиль:

html body {
  font-size:1em;
}

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

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

При использовании @import ваша кросс-браузерная совместимость веб-сайтов теперь достигнет 99,9% насыщения просто потому, что многие старые браузеры не будут читать импортированные листы. Это гарантирует, что вы применяете базовый простой набор шрифтов для их HTML, но более новые CSS используются более новыми агентами. Это позволяет контенту быть доступным для более старых агентов без ущерба для богатых визуальных дисплеев, необходимых в новых браузерах настольных компьютеров.

Помните, современные браузеры очень хорошо кэшируют структуры HTML и CSS после первого обращения к веб-сайту. Многократные обращения к серверу не являются узким местом, как это было раньше.

Мегабайты и мегабайты API-интерфейсов Javascript и JSON, загруженные на интеллектуальные устройства, и плохо разработанная разметка HTML, которая не согласована между страницами, сегодня являются основной причиной медленного рендеринга. Обычная страница новостей Google содержит более 6 мегабайт ECMAScript только для того, чтобы визуализировать крошечный текст! ржунимагу

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

Stokely
источник
2

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

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

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

По второй причине @importутверждение выглядит наиболее удобным, потому что вы получаете несколько файлов CSS, но загруженные файлы всегда одинаковы.

С точки зрения времени загрузки нет ничего другого. Браузер должен проверять и загружать отдельные файлы CSS независимо от того, как они реализованы.

Nitram
источник
1
Вы говорите: «С точки зрения времени загрузки нет ничего другого. Браузер должен проверять и загружать отдельные CSS-файлы независимо от того, как они реализованы». Это не правильно, хотя. браузер может загружать несколько CSS-файлов <link> параллельно, но для @ import CSS-файлов их необходимо загрузить, проанализировать, а затем загрузить @ import-файлы. Это замедлит скорость загрузки вашей страницы, особенно если импортированный файл CSS имеет свои собственные файлы @ import
cyberspy
2

Используйте @import в своем CSS, если вы используете CSS RESET, например, Reset CSS v2.0 Эрика Мейера, поэтому он выполняет свою работу перед применением CSS, предотвращая конфликты.

user2847941
источник
2

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

Итан
источник
0

Я испытал «высокий пик» связанных таблиц стилей, которые вы можете добавить. Хотя добавление любого количества связанных Javascript не было проблемой для моего бесплатного хост-провайдера, после удвоения количества внешних таблиц стилей я получил сбой / замедление. И правильный пример кода:

@import 'stylesheetB.css';

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

mggluscevic
источник
-2

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

  • Откройте все ваши файлы CSS и скопируйте код каждого файла
  • Вставьте весь код между одним тегом STYLE в заголовок HTML вашей страницы.
  • Никогда не используйте CSS @import или отдельные CSS-файлы для доставки CSS, если у вас нет большого количества кода или нет особой необходимости.

Более подробная информация здесь: http://www.giftofspeed.com/optimize-css-delivery/

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

Уильям Дрескер
источник
1
Чрезвычайно узкий, но действительный взгляд на термин «оптимизация». Для вашего удобства используйте инструмент на этапе публикации, чтобы добиться такого рода оптимизации. До этого делайте все, что поможет вам думать и кодировать быстрее.
Джесси Чисхолм
7
Поскольку большинство веб-сайтов имеют более 1 страницы, и каждый из них, как правило, использует один и тот же CSS, не будет ли быстрее использовать файл CSS (ссылка в заголовке)? Это приведет к тому, что он будет передан один раз, а затем использован из кеша браузера (часто в памяти) по сравнению с загрузкой всей вещи для каждой страницы, когда она является частью HTML каждой страницы.
Леголас
4
Это катастрофа - копировать все CSS-файлы и вставлять их в STYLE. Лучше включить хотя бы 1 CSS<HEAD>
T.Todua
6
Это полностью игнорирует кеширование браузера
Michiel
3
Я предполагаю, что этот ответ - шутка? (беспричинный жирный шрифт, и на связанной странице написано, что не следует использовать теги стиля)
Санджай Манохар
-2

Это может помочь разработчику PHP. Приведенные ниже функции удаляют пробелы, удаляют комментарии и объединяют все ваши CSS-файлы. Затем вставьте его в <style>тег в заголовке перед загрузкой страницы.

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

<?php
function minifyCSS($string)
{
    // Minify CSS and strip comments

    # Strips Comments
    $string = preg_replace('!/\*.*?\*/!s','', $string);
    $string = preg_replace('/\n\s*\n/',"\n", $string);

    # Minifies
    $string = preg_replace('/[\n\r \t]/',' ', $string);
    $string = preg_replace('/ +/',' ', $string);
    $string = preg_replace('/ ?([,:;{}]) ?/','$1',$string);

    # Remove semicolon
    $string = preg_replace('/;}/','}',$string);

    # Return Minified CSS
    return $string;
}
?>

Вы вызовете эту функцию в заголовке вашего документа.

<?php
function concatenateCSS($cssFiles)
{
    // Load all relevant css files

    # concatenate all relevant css files
    $css = '';
    foreach ($cssFiles as $cssFile)
    {
        $css = $css . file_get_contents("$cssFile.css");
    }

    # minify all css
    $css = minifyCSS($css);
    echo "<style>$css</style>";
}
?>

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

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>
Адам Джозеф Луз
источник
1
Я думаю, что было бы намного лучше просто «минимизировать» содержимое вашего CSS вручную, а затем перебирать выбранные таблицы стилей и добавлять их все на каждую страницу. Также file_get_contents()значительно медленнее, чем использование cURL.
Коннор Симпсон
1
Это плохая идея, которая препятствует использованию кэша браузера.
реформирован