Плох ли @import css в 2019 году с http2?

Question

[Muvka]

Просят доработать сайт, но я привык делить css в препроцессоре на много файлов. Так вот, хочу использовать модульность в этом проекте. Но нет желания разворачивать окружение. Импортировать собираюсь в один файл, а не в html импорты использовать.

Comments

[Сергей delphinpro]

импорт плох тем, что это блокирующая операция.

[Muvka]

Даже внутри css файла?

[lamer350]

Muvka, @import можно еще где то использовать кроме как внутри css файла?

[Muvka]

Да. Внутри тега style

<style>
    @import "/style/main.css" screen; 
  </style>

[Даниил Маслов]

Muvka, да, даже внутри, использовать не стоит

[sim3x]

https://www.youtube.com/watch?v=rQDd5kCwDj8

Answer 1

[ⓒⓢⓢ]

Проблема css импорта в том, что браузер заранее не знает об импорте, до тех пор, пока не загрузит и обработает файл с объявлением импорта. На это влияет и глубина импорта. page.css -> main.css -> block.css
Ждём и обрабатываем 2 ресурса, чтобы обработать block.css

На текущий момент css импорты можно заменить html линками (см. Preload, prefetch и другие теги)

Так же хорошей практикой для проекта является разделение стилей и загрузка только необходимых фрагментов для отображения текущей страницы, Критический CSS + прогрессивный CSS = ?
Для небольших проектов, условно меньше 5-10к css строк для мобильных и десктопа, разбиение стилей для экономии на рендеринге почти без выигрыша