@import vs link - программирование

Сначала я знаю, что название говорит, что это дублированный вопрос, заданный здесь, здесь и здесь. Все, что я читал по этой теме, старше двух лет. Много изменилось за тот период времени, так же как и те же мысли, которые по-прежнему целесообразны?

Вот пример, я использую @import внутри таблицы стилей, чтобы принести мой CSS reset и пару других стилей. Должен ли я изменить это значение от @import до <link>? В соответствии с этой статьей я должен использовать ссылку. Поэтому я прошу других разработчиков, что на самом деле является лучшим способом на сегодняшний день (25 августа 2011 г.)

Ответ 1

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

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

Вы можете увидеть это здесь очень подробно:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Итак, хотя @import может быть удобно, что все, что он предлагает. Если вы действительно хотите воспользоваться быстрым временем загрузки, используйте минимальное количество таблиц стилей (возможно, в большинстве случаев), напишите хороший CSS с эффективными селекторами (обычным материалом), уменьшите его и используйте тег <link>.

Это будет комментарий, но он слишком длинный:

Вместо @import (я знаю, что это очень удобно), вы должны объединять файлы в один, когда ваш сайт выходит в эфир. В любом случае вы не должны настраиваться в этом месте, и есть ряд инструментов, помогающих его минимизировать. Лично, используя PHP, у меня есть файл конфигурации, где я определяю все файлы CSS, которые записываются в отдельный файл CSS (тот, который я укажу в теге <link>), а затем, если кешированная версия устарела (определяется вручную или автоматически), он объединяет/минимизирует их и записывает содержимое в файл "cache" и возвращает строку запроса времени, чтобы добавить к имени файла CSS, чтобы принудительно загрузить новую версию.

Если вы также используете PHP, я настоятельно рекомендую cssmin, он может анализировать таблицы стилей для @import и вытягивать содержимое в один файл, а также обрабатывать все аспекты минимизации.