Есть ли причины по-прежнему использовать правило css "@import"? - PullRequest
Новая
       10

Есть ли причины по-прежнему использовать правило css "@import"?

8 голосов
/ 13 февраля 2009

Недавно я столкнулся с использованием правила @import на Coda.com. Они фактически используют для импорта основной таблицы стилей для сайта, в частности, формат: 

<style type="text/css" media="screen">
  @import url(./coda.css);
</style>

Что будет скрывать правила от Netscape 3 и IE 3 и 4. Так как основная аудитория инструментов веб-разработки будет использовать современные браузеры, какие еще причины могут быть использованы вместо ссылки?

Ответы [ 5 ]

11 голосов
/ 13 февраля 2009

Отсутствует. Использование элемента <link> также позволяет избавиться от FOUC .

.

РЕДАКТИРОВАТЬ : Использование @import в другой таблице стилей (.css файл) может использоваться как #include в C, но нет никаких оснований для использования @import в a <style> блок.

8 голосов
/ 13 февраля 2009

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

Операторы

@import внутри реальных файлов CSS (а не в элементе <style> в HTML) служат многим целям, например упрощают обмен и вставку других файлов CSS. Инфраструктура Blueprint CSS делает это, чтобы вы могли легко удалить определенные части каркаса, такие как типографика или сетка.

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

3 голосов
/ 13 февраля 2009

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

Таким образом, хотя ваша страница может ссылаться на одну таблицу стилей, эта таблица стилей может @import других таблиц стилей для сброса, типографии и т. Д.

Тем не менее, это замедляет загрузку вашей страницы, так как это просто более последовательные http-запросы.

0 голосов
/ 13 февраля 2009

Я сам использую модульный подход к разработке и часто получаю более 10 отдельных CSS-файлов. Как вы знаете, это довольно резкое количество HTTP-запросов, поэтому мне нравится использовать Blender .

Blender - это rubygem, который объединяет и минимизирует любое количество CSS-файлов в одну таблицу стилей. Это также работает для JavaScript.

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

0 голосов
/ 13 февраля 2009

Я согласен с Андреем. Я также использую импорт, чтобы логически разделить мой CSS. Лично мне нравится разбивать их на 4: сброс, структура, типографика, общие (bgs / border и т. Д.)

В зависимости от того, кто это делает, его стиля и предпочтений, файлы CSS также могут быть разбиты по разделам страницы, например header.css, footer.css и т. Д.

Одна дополнительная вещь, которую я делаю, чтобы избежать множественных http-запросов, - это процесс сборки, который объединяет (в порядке импорта) и сжимает файлы CSS для развертывания в реальном времени.

Надеюсь, это поможет

...