Групуємо CSS

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

Такий підхід, коли таблиці стилів розділені на кілька файлів, іноді зручні. Він дозволяє, як би збирати загальний CSS з окремих блоків-файлів, використовуючи лише ті, які потрібні безпосередньо на даній сторінці.

Але зловживати такою блоковою структурою все ж таки не варто. Пам'ятай, що зайвий файл – це зайве звернення до сервера, а отже, додатковий час та трафік.

Втім, якщо ти все-таки вирішив використовувати таку блокову структуру CSS, то крім тегів link у тебе є ще один варіант - директива @import.

З'єднуємо декілька CSS

Як ти, мабуть, пам'ятаєш, у CSS-файлі не може бути ніякої HTML-розмітки. Тобто теги link, звичайно, записуються безпосередньо у файлі HTML (у розділі head).

На відміну від link, директива @import дозволяє з'єднувати таблиці стилів усередині CSS. Вказані в директиві файли CSS завантажуються і приєднуються до того, що CSS в якому зустрілася @import.

Примітки:

Якщо в CSS є директива @import, то вона повинна перебувати на початку таблиці (перед усіма правилами). В іншому випадку браузер може її проігнорувати.

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

Для створення блокової структури CSS можна використовувати два варіанти.

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

Блоковаструктура зручна, наприклад, у великих проектах, що робить безліч людей. Але пам'ятай, що з підвищення швидкодії, зазвичай, таблиці навпаки, з'єднують до одного файл.

Тому використовувати @import без реальної необхідності варто, т.к. страждає швидкість завантаження.