Programmatically check if CSS file is used

Question

Is there a way to script audit CSS? I just need file level information, not individual rules. It seems like the page really needs to be displayed in order to get accurate information ... so maybe something like Selenium can help?

I have seen that there are browser plugins for checking CSS files (for example, this https://stackoverflow.com/a/16795/147/) , this Article from the Apart list ), but manually viewing the results for each page will take too much time.

Background

Over the years, various CSS files have been embedded in our web application template header. This is a huge pain trying to style an element when there are overlapping rules from several frameworks, plugins, etc. Everyone is fighting for excellence.

As part of an attempt to consolidate / standardize, I would like to move the old links from the site template and to separate page headers, so the effect of CSS rules will be limited only where they are used / necessary.

I think the easiest way would be to go around the site and keep track of which CSS styles are used there.

UPDATE

Inadvertent rule matches are possible, so I'm starting to think that I can't script this. We probably have to go through the pages. Even then, the styling of some pages may rely on a strange intersection of opposing stylesheets: - /

In addition, I am skeptical of these static CSS checkers, especially with template files. The rule ul > li.special may not correspond to anything before execution (elements can be created on the server side or javascript)

Answer 1

Unable to check if the file itself is being used. The browser will download them all. But what you can do is programmatically check if a selector is being used. Therefore, if each of your CSS files has one unique rule, you can use it.

In each file add

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

_{Note: I mentioned the use of a unique rule, as this approach does not allow you to check overrides.}

The browser only downloads background images for tags that exist in the DOM tree. To use this file, you need to use its rules. Then you will need to set Selenium (or its alternative) to "click" through all your pages.

After your test is complete, you simply download the access logs and look for the missing /track/ requests. And you can use the same approach to test each individual CSS rule (by adding a script to add ::after{ .. } to each rule) without changing the configuration of Selenium.

This will take some time to invest, but when you set it all up, it can be reused.

Not an elegant solution, but a workable one.