Содержание
Существует несколько способов применения стилей CSS к веб-странице, включая как внешние таблицы стилей, так и даже встроенные стили. Если вы используете внешнюю таблицу стилей, которая является рекомендуемым способом определения внешнего вида HTML-документа, один из подходов заключается в использовании @import.
Правило @import позволяет импортировать внешние таблицы стилей в ваш документ — либо на страницу HTML, либо даже в другие документы CSS. Разбиение множества стилей на несколько более мелких, сфокусированных файлов (один для макета, один для типографики, один для изображений и т. Д.) Может иногда облегчать управление этими файлами и различными стилями, которые они содержат. Если вы хотите воспользоваться этим преимуществом, то вам нужно будет импортировать эти различные файлы, чтобы все они работали для отображения вашей веб-страницы.
Импорт в HTML
Чтобы использовать правило @import в своем HTML, вы должны добавить следующее в документ:
: @Import url ("/ styles / default.css");
Этот код теперь импортирует эту таблицу стилей для использования на этой HTML-странице, и вы можете управлять всеми своими стилями в этом одном файле. Недостатком импорта таблиц стилей таким способом является то, что этот метод не допускает параллельной загрузки. Страница должна загрузить всю таблицу стилей, прежде чем она перейдет к остальной части страницы, включая любые другие файлы CSS, которые вы импортируете с использованием этого метода. Это отрицательно скажется на скорости вашей страницы и производительности загрузки. Учитывая, насколько важна производительность страницы для успеха сайта, сам по себе этот недостаток может быть причиной, по которой вы хотели бы избежать использования @import.
Альтернативный подход
В качестве альтернативы использованию @import в вашем HTML, вы можете сделать ссылку на этот файл CSS следующим образом:
Эта функция очень похожа на @import в том смысле, что она позволяет вам управлять всеми вашими CSS из одного центрального местоположения / файла, но этот метод предпочтителен с точки зрения загрузки. Если вы все еще хотите сегментировать различные виды стилей в отдельные файлы, вы можете продолжить делать это и использовать функцию @import в своем основном CSS-файле. Это означает, что ваши внешние CSS-файлы все еще могут управляться индивидуально, но, поскольку все они импортируются в один основной CSS, производительность улучшается.
Импорт в CSS
Использование приведенного выше примера кода принесет файл «default.css» для использования на вашей HTML-странице. Внутри этого CSS-файла у вас будут различные стили страницы. Вы можете подробно описать все эти стили на одной странице или использовать @import, чтобы разбить их на части для упрощения управления. Еще раз, скажем, мы используем 4 отдельных файла CSS — один для макета, один для типографии и один для изображений. Четвертый файл — это наш «главный» файл, на который ссылается наша страница (в данном примере это «default.css»). В самом верху этого основного CSS-файла мы можем добавить правила, показанные ниже:
@import url ('/ styles / layout.css'); @ import url ('/ styles / type.css'); @ import url ('/ styles / images.css');
Обратите внимание, что эти правила должны быть перед всем другим содержимым в вашем CSS-файле, чтобы они работали. Перед этими правилами импорта не может быть никаких других стилей CSS.
В соответствии с этими правилами импорта вы можете добавить любые другие стили CSS, которые вы хотите иметь на листе по умолчанию. Когда этот основной CSS-файл загружен, он сначала импортирует эти отдельные файлы и добавляет их стили в самый верх таблицы стилей. Затем все эти стили будут размещены под этими импортированными, создавая полный CSS-файл, который веб-браузер будет использовать для отображения вашего сайта. Вы получаете преимущество от управления небольшими, более сфокусированными файлами, в то же время имея единую таблицу стилей, связанную с этим HTML.
Использование @import для медиазапросов
Одна вещь, которую вы можете рассмотреть, это разделить медиазапросы вашего сайта для адаптивных стилей сайта в отдельный файл. Поскольку эти адаптивные стили могут сбивать с толку, если их рассматривать вместе с другими правилами стиля вашего сайта, их использование в другом файле может быть привлекательным. Одним из недостатков этого подхода является то, что, поскольку ваши правила @import должны быть первыми, это означает, что ваши медиазапросы будут загружаться раньше остальных стилей вашего сайта. При создании адаптивного для мобильных устройств сайта, который учитывает производительность, это может быть проблемой. По этой причине предлагается не разделять адаптивные стили вашего сайта по отдельности и использовать @import для их переноса на ваш сайт. Да, может показаться, что это дает преимущества, но недостатки перевешивают эти преимущества.
Нужно ли использовать @import?
Нет, ты не. Многие сайты просто отображают все свои основные стили внутри одного файла, и, насколько бы большим ни был этот файл, он управляется таким образом. Если вы найдете @import полезным, это может стать частью вашего рабочего процесса. В противном случае вы можете безопасно создавать веб-страницы, которые являются вашей единой таблицей стилей из всех ваших правил CSS.
Поддержка браузера
Очень, очень старые браузеры имеют проблемы с некоторыми из этих правил @import, но эти браузеры вряд ли станут проблемой для вас в наши дни. Это особенно верно сейчас, когда крайний срок жизни для старых версий Internet Explorer прошел. В конечном счете, если вы решите использовать правила @import в своем HTML или CSS, вам не следует сталкиваться с проблемами с унаследованными версиями веб-браузеров, если у вас нет странной необходимости поддерживать невероятно старые версии IE.
