Какие подводные камни при импорте на чистом CSS?

Главные подводные камни @import в чистом CSS — последовательная загрузка, строгие правила расположения и отсутствие изоляции.

Подводные камни

• Медленно. Импортированный файл начинает грузиться только после загрузки родительского. Цепочка импортов — несколько последовательных запросов, страница рисуется позже.
• Только в начале файла. @import после обычных правил игнорируется (раньше него могут быть только @charset и @layer).
• Нет изоляции. Все импортированные стили попадают в общий каскад.
• Дубли. Один файл, импортированный дважды, загрузится и применится дважды.
• Порядок каскада. Импортированные правила считаются стоящими на месте @import — от этого зависит, кто кого перебивает.

Полезные возможности

@import url('print.css') print;
@import url('library.css') layer(vendor);

Медиаусловия и слои позволяют ограничить применение и задать приоритет.

Как лучше

Подключать файлы через <link> в HTML или собирать бандлером; в Sass — @use.

Коротко для собеседования

Нативный @import тормозит рендер последовательной загрузкой, должен стоять в начале файла и не изолирует стили; на практике его заменяют <link> или сборкой.

Подробнее: MDN — @import