От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу.
Это правило также можно использовать в сочетании с медиа-запросами для импорта таблицы стилей на основе типа устройства. Правило стиля @import является полезным, поскольку оно может быть использовано, чтобы избежать дублирования правил стиля, и даже импорта конкретных стилей на основе устройства. Правило @import должно указываться в верхней части таблицы стилей.
@import "style.css"; /* using a string */
@import url("rebrand.css"); /* using a URL */
@import "print.css" print; /* using a media query */Проблема не в сложности языка или сложности кодирования. Проблема заключается в огромном объеме информации, необходимой для создания даже веб-сайта среднего размера. Если учитывать объем HTML, необходимый для создания даже простых конструктивных элементов, а затем экстраполирования его на многочисленные страницы с рисунками и информацией на каждой странице, задача может оказаться сложной.
Это большое количество информации также может быть трудно разместить на верху. Если вы хотите скопировать и вставить определенные правила, то вам нужно вернуться, чтобы найти их. Даже если вы отлично справляетесь с организацией CSS, размер сайта и объем информации могут быть просто ошеломляющими. Правило @import — это отличный способ организовать большое количество правил стиля.
Преимущества CSS @import
Самое лучшее в CSS @import — это то, что он экономит ваше время и предотвращает разочарование. Если вы не используете @import, вы, как минимум, возвращаетесь к старому CSS, чтобы скопировать и вставить необходимую информацию или управлять всеми правилами стилей в одной таблице стилей. Это может занять много времени, и даже увеличить сложность, так как ваш сайт становится все больше и больше, и код становится все труднее найти. Еще хуже то, что дублированные стили приводят к большей таблице стилей, которая может снизить производительность веб-сайта.
CSS @import экономит много времени, но также обеспечивает большую точность. Вместо того, чтобы потенциально писать плохие правила стиля или копировать и вставлять неправильную информацию, все, что вам нужно сделать, это импортировать имеющиеся правила. Это просто и очень точно, особенно по сравнению с альтернативами. Его также можно использовать для разделения правил стиля на отдельные таблицы стилей, например:
@import "buttons.css"; @import "links.css"; @import "forms.css";
Помимо этих плюсов, вот более подробный список того, почему CSS @import является отличным инструментом веб-разработки:
Это экономит время даже по сравнению с подходом копирования и вставки или методом добавления ссылок.
Это уменьшает вероятность ошибок.
Это предоставляет организационную помощь при создании средних и крупных веб-сайтов. В подобных проектах так много информации и кода, что любая помощь имеет значение.
Вы можете создать столько файлов CSS, сколько захотите импортировать. Вы можете создать основной файл, а затем подключить дополнительные файлы, такие как файлы типографики или изображений.
Это бесплатный, экономящий время, простой и эффективный инструмент для создания веб-сайтов.
Недостатки CSS @import
Единственный реальный минус, связанный с CSS @import, заключается в том, что это может увеличить время загрузки страницы, если не используется в процессе сборки. Когда страница загружается с помощью команды @import, она должна прочитать и импортировать таблицу стилей, указанную в правиле, а затем применить ее к текущей странице. Это не займет много времени, и даже на самых крупных веб-сайтах, использующих команду @import, заметной разницы во времени загрузки не чувствуется. Однако, для ботов, которые используют время загрузки для вычисления вашего рейтинга в поиске, это может сдвинуть вас вверх или вниз в выдаче поисковых систем.
Альтернативы CSS @import
Есть несколько альтернатив CSS @import. Некоторые из них были упомянуты ранее, но здесь мы рассмотрим их немного подробнее. Хотя эти альтернативы и доступны, CSS @import — самый быстрый и точный способ перенести уже существующие стили из одной таблицы стилей в другую. Вот список альтернатив:
Ссылки: Использование тега link для привязки CSS-файлов в заголовке HTML-файла позволяет загружать, а не вызывать CSS-файлы. Это означает, что браузеру не нужно переходить к другой таблице стилей для ее импорта, вместо этого ее можно загрузить на месте. Данный метод имеет определенные преимущества, поскольку он не увеличивает время загрузки, но также имеет и некоторые недостатки. Самое главное из них это то, что если вы хотите создать ссылку на файл CSS, вы должны знать, где он находится. Если вы этого не сделаете, а ваш сайт большой и сложный, то поиск этой ссылки может занять некоторое время.
Переписывание одних и тех же правил стилей: это один из способов слияния, но это не совсем верная альтернатива. Переписывать одно и то же снова и снова на разных страницах было бы в лучшем случае слишком сложно и неэффективно. Хотя это может быть сделано и может быть сделано эффективно, риск ошибки и огромное количество необходимого времени делают этот метод неактуальным.
Копирование и вставка. Другой способ объединения данных — просто копирование и вставка. Однако, когда таблицы стилей (и длинные) копируются и вставляются, это может стать затруднительным. С одной стороны, если вы пропустите одну букву или добавите больше пробелов, вы можете легко испортить существующий код. Вы также должны знать, где находится старый CSS, чтобы найти информацию, которую вы хотите скопировать.
Стоит ли использовать CSS @import?
Краткий ответ: да. Преимущества перевешивают недостатки и с довольно большим отрывом. Если вы являетесь компанией, у которой есть ресурсы, чтобы нанимать кого-то для работы на полную ставку по кодированию, созданию и поддержке вашего веб-сайта, то вы можете обойтись и без команды @import. С другой стороны, если вы веб-дизайнер или владелец малого бизнеса, создающего свой собственный веб-сайт, преимущества нельзя игнорировать.
CSS @import может увеличить время загрузки сайта. Однако штука в том, что это не увеличит время загрузки домашней страницы. Это имеет ключевое значение, потому что любой, кто посещает вашу домашнюю страницу, по большей части, имеет на то какую-то причину. Если они посещают последующие страницы, то это потому, что они заинтересовались вашей идеей или товаром. Этот тип посетителей вашего сайта, вероятно, не остановится перед тем, чтобы подождать дополнительные 0,074 секунды (это вымышленная цифра, но вы понимаете, в чем суть), пока загрузится страница с CSS @import. Это дополнительное время может быть даже полностью удалено, если @import используется в процессе сборки.
Автор: Martin Williams
Источник: https://www.keycdn.com
Редакция: Команда webformyself.