Більшість людей використовують кілька файлів для створення CSS під різні типи пристроїв (media-типи), такі як екрани моніторів, принтери або КПК. У цьому випадку файли приєднуються до веб-сторінці або за допомогою елементів link з атрибутом media. або за допомогою правила @import із зазначенням одного або більше медіа-типів.
Немає нічого поганого в поділі ваших CSS на декілька файлів і приєднанням їх у такий спосіб (на момент написання статті саме таким чином це реалізується на нашому сайті), але при цьому існує два недоліки: це призводить до більшої кількості HTTP-запитів від браузера до сервера і необхідності підтримки в актуальному стані кількох CSS файлів одночасно.
Деякі люди люблять розподіляти свої CSS по декількох файлах, і не тільки через різні media-типів, а ще й за належністю розділах сайту або призначенню вмісту відповідних таблиць стилів (позиціонування, кольору, типографіка).
На щастя для мене і тих, хто чинить так само як я, існує спосіб об'єднання усіх CSS в один файл.
Використовуйте правило @media
Правило @media дозволить вам згрупувати в одному файлі ваші CSS правила за типом пристроїв, для яких вони призначені. Будь-які правила, що знаходяться поза правилами @media застосуються до всіх типів пристроїв, до яких застосовано сам файл CSS.
Нижче розташований приклад таблиці стилів, в якій використані правила @media:
Виходячи з того, що розташовані вище правила знаходяться в CSS-файлі, який застосований до всіх типів пристроїв, діють такі положення:
- Для медіа-типів screen і projection текст буде темно-сірим, а фон буде складатися з повторюваного зображення.
- Для медіа-типу print текст буде чорним, а фон білим.
- Агенти користувача, які використовують медіа-тип handheld. застосують темно-зелений колір до тексту, а фон зроблять білим.
- Для всіх інших медіа-типів текст буде темно-сірим, а фон білим.
Ви можете використовувати цей спосіб чи ні, але я виявив, що він призводить до зменшення надмірності і знижує ризик того, що один або кілька медіа-типів будуть пропущені мною при черговому редагуванні CSS.