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

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

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

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

ОТВЕТЫ

Ответ 1

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

@import url("stylesheetB.css");

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

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

Ответ 2

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

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

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

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

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

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

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

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

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

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

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

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

Ответ 3

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

Также часто бывает сложно минимизировать и объединять файлы css, которые подаются через тег @import, потому что minify scripts не могут "очистить" строки @import от других файлов css. Когда вы включаете их в качестве тегов ссылок, вы можете использовать существующие модули minify php/dotnet/java для выполнения минимизации.

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

Ответ 4

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

импорт загружает все дополнительные файлы css один за другим (медленнее) и может дать вам Flash Unstyled Content

Ответ 5

@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

Ответ 6

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

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

Ответ 7

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

Ответ 8

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

Ответ 9

Цитата из http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

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

Ответ 10

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

Ответ 11

Существует много хороших причин использования @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 очень хорошо после первого вызова веб-сайта. Несколько вызовов на сервер не является узким местом, которое когда-то было.

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

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

Ответ 12

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

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

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

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

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

Ответ 13

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

Ответ 14

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

Ответ 15

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

@import 'stylesheetB.css';

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

Ответ 16

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

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

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

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

Ответ 17

Это может помочь разработчику 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>