В чем смысл @import?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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