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

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

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

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

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

@import url("stylesheetB.css");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучше НЕ использовать @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.

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

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

@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

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

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

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

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

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

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

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

Есть много хороших причин для использования @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.

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

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

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

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

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

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

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

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

@import 'stylesheetB.css';

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

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

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

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

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

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