Как лучше подключать стили — через link или @import?

Question

[Богдан Герасименко]

Некоторые разработчики шаблонов и тем подключают все стили через link:

<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fontawesome.css">
<link rel="stylesheet" href="style.css">

Я предпочитаю делать так, на сайте одна строка:
<link rel="stylesheet" href="style.css">
а все остальное через @import (при условии, что оно используется на всех страницах):

@import url('bootstap.css');
@import url('fontawesome.css');

При этом FontAwesome может не работать на мобильных. В этой статье написано, что одним из минусов @import есть то, что он не загружается в той последовательности, как указан.

Что скажут Гуру по этому поводу?

Comments

[Евгений Петров]

Я не понимаю, как можно до сих пор рассуждать, опираясь на статью 6-летней давности, в которой рассматривается некорректная работа IE.
Вы планируете использовать IE8 и ниже в своей работе? Если да, то материалы статьи для вас актуальны. Если же нет, не стоит распространять выводы о работе старых IE на современные браузеры.

Что же касается вложенных import — именно так и должно загружаться. Сравнивать порядок загрузки имеет смысл только для одноуровневого import, потому как двух и более уровней подключения link просто не существует.

Answer 1

[Moskus]

Если вы подключаете один файл через <link>, а потом внутри него вставляете несколько @import, то все, что вы подключаете через @import будет загружаться только после того, как будет полностью прочитан тот первый файл стилей.
Я не могу, соответственно, сказать, что это абсолютно всегда вредно. Просто нужно понимать, когда это использовать, а когда - нет.
Например, если по какой-то причине вы не хотите параллельной загрузки и произвольного порядка применения стилей browser-ом к странице, используйте @import, если наоборот - используйте <link>.

Утверждение о том, что минимально возможное число файлов стилей (в идеале - один) - это всегда хорошо, далеко от универсального, потому что эффект большего или меньшего числа стилей зависит от характеристик подключения (максимальное число одновременных запросов на сервере) и содержимого страницы. Если общее число запросов для получения страницы и так мало, или есть дополнительный контент (изображения) загружаются асинхронно по мере прокрутки, то нет никакого смысла сводить число файлов стилей к одному - нужно ориентироваться на то, сколько вообще запросов потребуется для того, чтобы загрузить страницу.

Comments

[Евгений Петров]

Несколько стилей, указанных с помощью import, точно так же загружаются параллельно (с учётом ограничения конкретного браузера).
Порядок применения стилей чётко и недвусмысленно определяется местом написания link, style или import.

Answer 2

[Nikolay Talanov]

Использование Dmitrijs Balcers это вредная практика. Мне сейчас в 4 часа ночи лень искать пруфлинки, но про это писали уже миллион раз.
Речь конечно же идет об импорте as is. Если же на проекте имеется склеивание стилей, то там только импорт и юзается наверное в главном файле стилей.
А вообще в 2015 такие вопросы задавать некорректно, ибо фронтенд у вас должен автоматизированно собираться на проекте.

Comments

[Евгений Петров]

Найдёте пруфлинки? Не понимаю, в чём практика вредна, если брать техническую сторону?

[Faber Estello]

Евгений Петров: import загружает в хаотичном порядке файлы и перегружает страницу, а скорость в 2 с - это в наше время как век!!

[Евгений Петров]

Sen Selesss: Что за чушь вы несёте?

[Faber Estello]

Евгений Петров: без оскорблений пожалуйста! Если Вы не компетентны, то лучше и не пишите!

[Евгений Петров]

Sen Selesss: Вы несёте чушь. Ещё раз повторить?

[Сергей Протько]

Евгений Петров: я подозреваю что он говорит о том. что каждый импорт по загрузке вызывает reflow всей страницы или что-то в этом духе.

Sen Selesss: яснее объясняйтесь, вам трудно понять (я даже не уверен понимаю ли я вас) и от того в принципе это все кажется бредом.

[Сергей Протько]

Sen Selesss: вас* трудно понять

[Евгений Петров]

Сергей Протько: import вызывает reflow?.. Я не понимаю ещё больше... О чём вообще идёт речь?)

[Сергей Протько]

Евгений Петров: ну мол. стили загрузили, браузер их распарсил, пошел пересчет стилей. Каждый раз как загружается CSS - новый пересчет стилей. Во всяком случае это логично.

Еще момент такой, я вот точно не помню, но вроде как импорты в CSS блокируют разбор CSS идущего следом.

[Евгений Петров]

Сергей Протько: С точки зрения построения CSSOM нет никакой разницы, загружать ли с помощью link или import для ровно такого же файла. Вопрос был про это.
Ну а про хаотичный порядок — это совсем за гранью понимания:)