Программно проверить, используется ли файл CSS

Question

Есть ли способ сценариев проверки CSS? Мне просто нужна информация об уровне файла, а не отдельные правила. Похоже, что страница должна действительно отображаться, чтобы получить точную информацию ... так что может быть что-то вроде Selenium?

Я видел, что есть плагины браузера для ревизуют CSS файлы (например, это StackOverflow question, это A List Apart article), но ручной проверке результатов для каждой страницы будет слишком долго

фона

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

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

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

UPDATE

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

Кроме того, я скептически отношусь к этим статическим шагам CSS, особенно с файлами шаблонов. Правило ul > li.special может не соответствовать чему-либо до выполнения (элементы могут быть созданы на стороне сервера или javascript)

Answer 1

Невозможно проверить, используется ли сам файл. Браузер загрузит их все. Но то, что вы можете сделать, это программно проверить, используется ли селектор. Поэтому, если каждый из ваших файлов CSS имеет одно уникальное правило, вы можете использовать его.

В каждом файле добавить

UNIQUE_RULE::after { 
    content: ' '; 
    background: url(/track/?page=filename.css); 
} 

_{Примечание: я говорил с использованием уникального правила, так как этот подход не позволяет проверить переопределение.}

Браузер загружает фоновые изображения только для тегов, которые существуют в дереве DOM. Чтобы этот файл использовался, вам необходимо использовать его правила. Тогда вам нужно будет установить Selenium (или его альтернативу), чтобы «щелкнуть» по всем вашим страницам.

После того, как ваш тест закончен, вы просто пробираетесь через свои журналы доступа и ищите отсутствующие/track/ запросы к файлам. И вы можете использовать этот же подход для проверки каждого отдельного правила CSS (путем добавления сценария для добавления ::after{ .. } к каждому правилу) без изменений в настройке Selenium.

Это потребует некоторого времени на инвестиции, но, когда вы все это настроите, его можно будет повторно использовать.

Не изящное решение, но работоспособное.