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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

импорт загружает любые дополнительные css-файлы один за другим (медленнее) и может дать вам вспышку неустановленного контента

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

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

есть много веских причин использовать @import.

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

чтобы сделать это, в вашей базе.файл 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, чтобы сделать крошечный текст! ЛОЛ

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

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

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

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

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

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

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

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

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

@import 'stylesheetB.css';

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

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

• откройте все ваши CSS-файлы и скопируйте код каждого файла
• вставьте весь код между одним тегом стиля в 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('/ ?([,:;{}]) ?/','',$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() in ваша голова документа. Пройдите в массив с именами ваших таблиц стилей с его путем IE:css/styles.css. Вы не обязаны добавлять расширение .css как это добавляется автоматически в функции выше.

<head>
    <title></title>
    <?php
    $stylesheets = array(
        "bootstrap/css/bootstrap.min", 
        "css/owl-carousel.min", 
        "css/style"
        );
    concatenateCSS( $stylesheets );
    ?>
</head>