Найкращий спосіб включити 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, грунт має кілька варіантів для цього. ( Див. Також це запитання ).

Як тільки ви перебуваєте на мінімізованому етапі, <link>це швидше, як вказували люди, тому максимум посилання на кілька таблиць стилів і не імпортуйте жодного, якщо це можливо.

Перш ніж сайт досягає масштабів виробництва, важливіше, щоб код був організованим і логічним, ніж те, що він йде трохи швидше.

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

Крім того, часто складніше мінімізувати та комбінувати файли css, які подаються через тег @import, оскільки мінімізовані сценарії не можуть "вилучити" рядки @import з інших файлів css. Якщо ви включаєте їх як <теги посилань, ви можете використовувати існуючі мінімізовані модулі php / dotnet / java для мінімізації.

Отже: використовуйте <link />замість @import.

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

імпорт завантажує будь-які додаткові файли CSS один за одним (повільніше) і може надати вам Flash Of Unstyled Content

@Nebo Ізнад Мішо Гргур

Нижче наведено всі правильні способи використання @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". Тож в умовах швидкості це не швидше. І як сказав "сумерк", він не завантажується одночасно, що є падінням.

Я використовую @import, коли я роблю дві версії сторінки, англійську та французьку. Я буду створювати свою сторінку англійською мовою, використовуючи main.css. Коли я будувати французьку версію, я перейду на посилання на французьку таблицю стилів (main_fr.css). У верхній частині французької таблиці стилів я імпортую main.css, а потім перезначу конкретні правила лише для тих частин, які мені потрібні у французькій версії.

Цитується з http://webdesign.about.com/od/beginningcss/f/css_import_link.htm

Основна мета методу @import - використання декількох таблиць стилів на сторінці, але лише одне посилання у вашій <head>. Наприклад, корпорація може мати глобальний аркуш стилів для кожної сторінки на сайті, підрозділи мають додаткові стилі, які застосовуються лише до цього підрозділу. Посилаючись на аркуш стилів підрозділу та імпортуючи глобальні стилі у верхній частині цього аркуша стилів, вам не доведеться підтримувати гігантський аркуш стилів із усіма стилями для сайту та кожного підрозділу. Єдина вимога - будь-які правила @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 для ПК.

Для цього у файлі 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, як, наприклад, Ерик Мейєр Скидання CSS v2.0, так що він виконує свою роботу перед застосуванням CSS, тим самим запобігаючи конфлікти.

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

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

@import 'stylesheetB.css';

Таким чином, я вважаю корисним мати хорошу ментальну карту, як згадував Nitram, хоча він ще важко кодує дизайн. Швидкість І я вибачаю англійські граматичні помилки, якщо такі є.

Майже немає причин використовувати @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>