@импорт против ссылке

Question

@импорт против ссылке

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

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

503 1

css import

1 ответ:

Comments

Ничего не найдено.

Wesley Murch · Accepted Answer · 2011-08-26 05:44:34

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

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

вы можете увидеть это в мельчайших деталях здесь:

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

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

это будет комментарий, но он тоже получил долго:

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

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