7

Is there a way to script a CSS audit? I just need file-level info, not individual rules. Seems like the page has to actually render in order to get accurate info… so maybe something like Selenium could help?

I've seen that there are browser plugins to audit CSS files (e.g. this StackOverflow question, this A List Apart article), but manually reviewing results for every page would take too long

Background

Over the years, various CSS files have crept into our web app's template header. It's a huge pain trying to style an element when there are overlapping rules from multiple frameworks, plugins, etc all fighting for supremacy.

As part of an attempt to consolidate/standardize, I'd like to move older references out of the site template and into the individual page headers, so the CSS rules' affects will be limited to only where they are used/needed.

I'm thinking the easiest thing would be to crawl the site and track which CSS stylesheets are used where.

UPDATE

Unintentional rule matches are possible, so I'm starting to think I can't script this. We'll probably have to go page-by-page. Even then, the styling of some pages might rely on the strange intersection of opposing stylesheets :-/

Also, I'm skeptical of these static CSS checkers, especially with template files. The rule ul > li.special might not match anything until runtime (elements could be created server side or javascript)

David J
  • 659
  • 1
  • 9
  • 25
  • What about [PurifyCSS](https://github.com/purifycss/purifycss)? Looks like it can be used in combination with web-scraper and/or Selenium-driven script. – raina77ow Aug 15 '16 at 16:41
  • [grunt-uncss](https://github.com/addyosmani/grunt-uncss) might also be an option depending on your development stack. – hungerstar Aug 15 '16 at 16:51
  • The problem is that PurifyCSS and uncss do the opposite of what want… I just need to identify unused (or used) stylesheets for a given page, so they wouldn't work out of the box – David J Aug 15 '16 at 16:58
  • 1
    I've been in a situation like this where I had custom styling over template styling including some legacy versions of the stylesheet for old pages. What I did then (and it takes a lot of time too), is remove all the styling and just start over, top down, re-implementing the style sheets. This had the advantage that it was clean, and I took the opportunity to write everything in SCSS and apply some structure to the CSS project as well. – GolezTrol Aug 15 '16 at 17:40
  • 1
    I've done something similar (specifically around media queries) when in inheriting old code. I wrote up an article about it [here](http://doejo.com/blog/sniff-out-code-smells-using-media-queries/). – Brice Aug 16 '16 at 08:25

1 Answers1

0

There is no way to check, whether file itself is used. Browser will load them all. But what you can do is programmatically check is a selector is used. Therefore, if each of your CSS files has one unique rule, you can exploit it.

In each file add 

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

Note: I mentioned using unique rule, because this approach does not let you check overrides.

Browser loads background images only for tags, that exist in the DOM tree. For this file to be used, you need to use on of its rules. Then you will need is to set up Selenium(or its alternative) to "click" through all of your pages.

After your test has finished running, you just grep through your access logs and look for the missing /track/ file requests. And you can use this same approach to check each individual CSS rule (by making script to add ::after{ .. } to each rule) too with no changes to the Selenium setup.

It will require some time investment, but, when you have set it all up, it will be possible to reuse it.

Not an elegant solution, but workable.

tereško
  • 58,060
  • 25
  • 98
  • 150