Какой смысл @import?

Question

Может кто-нибудь объяснить, в чем преимущества использования синтаксиса @import по сравнению с простым включением CSS с использованием стандартного метода ссылки?

Answer 1

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

Тем не менее, по-прежнему расточительно загружать несколько CSS-файлов на веб-сайты с большим трафиком. Наш скрипт сборки на самом деле «компилирует» наш CSS при сборке в режиме релиза, выполнив следующее:

• Все CSS-файлы уменьшены (лишние пробелы и комментарии удалены)
• У нас есть файл "core.css", который представляет собой просто список @import операторов; во время компиляции каждый из них заменяется уменьшенным CSS этого файла

Таким образом, мы получаем один минимизированный CSS-файл в процессе производства, в то время как в режиме разработки у нас есть отдельные файлы для упрощения отладки.

Answer 2

Если вы используете <link> s в своих файлах HTML, все эти файлы должны отслеживать все файлы CSS. Это, очевидно, усложняет изменения и дополнения (как для CSS, так и для файлов HTML).

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

Answer 3

@ import позволяет вам иметь расширяемую таблицу стилей без необходимости изменять html. Вы можете link один раз перейти на свой основной лист, а затем, если вы хотите добавить или удалить дополнительные листы, ваш HTML не изменится.

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

Answer 4

@import - это код CSS. <link> - это HTML-код. Так что, если вы хотите включить таблицы стилей в другие таблицы стилей (или если вы не можете изменить HTML), @import - это путь.

В соответствии со спецификацией CSS все @import объявления должны появляться до любых правил стилей в вашей таблице стилей. Другими словами, все в верхней части таблицы стилей

Любые объявления @import, которые появляются после правил стиля, должны игнорироваться. Internet Explorer никогда не уважал это; Я считаю, что другие браузеры делают. Это делает @import немного менее полезным, потому что правила в импортированной таблице стилей будут переопределены правилами равной специфичности в импортируемой таблице стилей.

Answer 5

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

Answer 6

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

Answer 7

Скажем, вы работаете в Massive Dynamics, Corp .. У нее есть подразделение Widgets. В отделе виджетов есть Бухгалтерия. Счета подразделяются на кредиторскую задолженность и дебиторскую задолженность.

Используя @include, вы запускаете веб-сайт с одной global.css таблицей стилей верхнего уровня, которая применяется ко всему.

Затем вы создаете вторую таблицу стилей, widgets.css для разделения виджетов. Он включает в себя глобальный и свои собственные стили (которые могут переопределять глобальные стили при необходимости из-за каскада). Затем вы создаете третий accounts.css для учетных записей. Он включает widgets.css , что означает, что он также включает global.css . Вспенить, промыть, повторить.