Есть ли веская причина для того, чтобы два файла CSS импортировали друг друга?

8

Я работаю над некоторыми критическими изменениями стиля для сайта WordPress клиента, который был разработан другой командой.

CSS кажется запутанным беспорядком. Одна из особенностей , которые я нашел, что основная таблица стилей Тематической в style.css, @imports другой таблицы стилей из подкаталога css/default.css. В то же время, default.css@imported основной таблицы стилей в верхней части своего файла тоже.

Я удалил директивы @import и добавил содержимое default.cssв style.css, но это нарушает компоновку независимо от того, помещаю ли я default.cssстили вверху или внизу style.cssфайла. Цикл @import делает что-то с каскадом, что каким-то образом заставляет верстку работать.

Я никогда не видел ничего подобного раньше. Кажется очевидным, что я должен распутать таблицы стилей и упорядочить селекторы в порядке возрастания специфичности. Но есть ли разумное обоснование для намеренного создания двух файлов CSS, которые @import друг друга? Это кажется сумасшедшим, но возможно ли, что есть принципиальная причина этого?

Я специализируюсь на фронтэнде, а не на WordPress. Я отмечаю, что WordPress анализирует основную таблицу стилей темы для получения информации о теме. Является ли рекурсия @import чем-то полезным для WordPress?

css import Джон Стивенс
источник
Какие плагины WP кэширования установлены? Вы пытались использовать инструменты разработки Chrome, чтобы увидеть, какие правила CSS нарушают макет при удалении импорта, и определить, в каком файле они находятся?
nathangiesbrecht
1
Хороший вопрос, Джон, но страница, требующая загрузки одних и тех же файлов снова и снова, особенно без надлежащих кэширующих заголовков, прикрепленных к каждому из них, - это путь к катастрофе. Я мог бы догадаться, что у вас установлено несколько плагинов WordPress.
Майк
1
"и добавил содержимое файла default.css в style.css" - может быть, это должно быть наоборот ?! Любые медиа-запросы, прикрепленные к @import?
MrWhite
можешь поделиться сайтом?
ePetkov

Ответы:

3

@import - большой беспорядок относительно времени загрузки страницы. После того, как вы сделаете CSS, ваш клиент придет с идеей оптимизации времени загрузки, и самое позднее там снова встанет вопрос об избавлении от @import.

Во-первых, я бы попытался заменить @import на <link>. Затем попробуйте с помощью dev-tools определить, какие классы конфликтуют. После этого попробуйте переместить правила CSS из импортированного CSS-файла с добавлением! Важное.

Может случиться, что есть некоторые проблемы с (относительными) путями файлов в импортированном файле CSS ...?

Иногда это помогает загружать сайт в браузере с помощью @imported CSS, так что похоже на то, что ожидает клиент, затем скопировать весь CSS с помощью dev-tools, сохранить его в один файл CSS и заменить все файлы CSS на этот вновь созданный один.

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

Евгений
источник
Спасибо. Перемещение всех правил в один файл и использование инструментов Dev для разрешения конфликтов - это именно то, что я сделал, и это сработало великолепно.
Джон Стивенс