5

I've recently (manually) removed a ton of unused CSS from a website, but it looks like I went a little over aggressive.

What is a good way to audit the html and javascript to determine which style definitions are missing from the CSS?

To clarify for @Paulie_D and others, I am looking for a way to find classes in the HTML and Javascript that ARE NOT in the CSS files.

Parris Varney
  • 11,320
  • 12
  • 47
  • 76
  • 1
    Unsure why you've been downvoted - it's a valid question imo... – wickywills Jan 10 '14 at 14:16
  • @wickywills Such is life I guess.. – Parris Varney Jan 10 '14 at 14:18
  • Are you looking for classes in the HTML/JS that AREN'T in the CSS file? Your question isn't clear. – Paulie_D Jan 10 '14 at 15:09
  • You could iterate through each element in js and check for a specific style on only the elements with a class or ID using `if(elems[i].className != '' && elems[i].id != '')`, but I'm not sure how to do it generically. It'd depend on the element type as well, lots of work. It'd be easier to check line by line through HTML, looking for styles as you go – Zach Saucier Jan 10 '14 at 15:32
  • 1
    @Paulie_D Edited, thank you for the comment. Love your work on Jersey shore btw. – Parris Varney Jan 10 '14 at 15:52
  • 1
    Only one i can find is Dust-Me (https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/) – Paulie_D Jan 10 '14 at 15:56
  • related: https://stackoverflow.com/q/14390183/2600099 – Matija Nalis May 25 '18 at 15:14

1 Answers1

2

In terms of debugging I use the _debug.scss file from Inuit.css to check for HTML oddities I may have missed.

https://github.com/csswizardry/inuit.css/blob/master/generic/_debug.scss

Includes things like finding empty elements, or <a> tags with # as the href.

:empty{
    outline:5px solid yellow;
}

It's probably a bit basic but based on the information you provided this might be your best solution, at least to start with.

geebru
  • 139
  • 7