Как подключить CSS к CSS: простой пример

evo

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

Используйте директиву @import в самом начале файла CSS, чтобы "подтянуть" другой файл. Синтаксис следующий:

@import url("путь_к_файлу.css");

Обязательно пишите эту запись в начале файла до всех остальных CSS правил.
Путь к файлу может быть относительным или абсолютным.

Предположим, у вас есть два файла:

base.css — содержит базовые стили
style.css — основной файл, куда вы подключите base.css

Содержимое style.css:

@import url("base.css");

/* Далее идут остальные стили */
body {
  background-color: #f0f0f0;
}

h1 {
  color: blue;
}

В таком случае стили из base.css автоматически применятся в том же документе, где подключён style.css.

Для чего вообще это необходимо?

Позволяет разделять стили по тематике или компонентам.
Упрощает поддержку крупных проектов.
Можно подключать общие стили в нескольких местах без дублирования кода.

На заметку:

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