Xiper

Группируем CSS. Директива @import

Автор: Александр Головко Дата публикации:
Последнее обновление:

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

<link rel="stylesheet" type="text/css" href="css/base.css" /> <!--базовые стили--> 
<link rel="stylesheet" type="text/css" href="css/inner.css" /> <!--общие стили для внутренних страниц сайта-->
<link rel="stylesheet" type="text/css" href="css/profile.css" /> <!--индивидуальные стили для конкретного подраздела-->

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

Но злоупотреблять такой блочной структурой все же не стоит. Помни, что лишний файл — это лишнее обращение к серверу, а, значит, дополнительное время и трафик.

Впрочем, если ты все-таки решил использовать такую блочную структуру CSS, то, кроме тегов link, у тебя есть еще один вариант — директива @import.

Соединяем несколько CSS

Как ты, наверное, помнишь, в CSS-файле не может быть никакой HTML-разметки. То есть теги link, конечно, записываются непосредственно в файле HTML (в секции head).

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

Синтаксис

@import url("<путь к CSS-файлу>") [тип устройства];

где

  • путь к CSS-файлу — абсолютный или относительный адрес файла;
  • тип устройства — необязательный параметр, эквивалентный атрибуту media тега link. Позволяет импортировать таблицу только для определенных устройств отображения. Подробнее смотри в CSS справочнике.

Пример:

@import url(css/base.css);
@import url(css/inner.css);
@import url(css/profle.css);
/* далее идут обычные CSS-правила */

Примечания:

Если в CSS есть директива @import, то она должна находиться в самом начале таблицы (перед всеми правилами). В противном случае браузер может ее проигнорировать.

Так, как @import — это CSS-конструкция, то содержатся она должна либо в CSS-файле, либо внутри тега style (использовать @import во встроенных стилях нельзя!).

Резюме

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

  1. подключать нужные файлы таблиц в HTML с помощью тегов link;
  2. импортировать все таблицы в одну, с помощью директивы @import.

Блочная структура удобна, например, в больших проектах, которые делает множество людей. Но помни, что для повышения быстродействия, как правило, таблицы наоборот, соединяют в один файл.

Поэтому использовать @import без реальной необходимости не стоит, т.к. страдает скорость загрузки.