1

I have been assigned the task of cleaning up over 5,000 lines of CSS. During the development of this project, we basically just appended classes to this massive CSS file.

I am tasked with organizing classes according to their pages, and then prepending the page ID to them to make them only hit that page.

However, what makes this tedious is manually finding out what classes and ID's are in a page, and then organizing them.

Is there a way to "dump" all the classes from a stylsheet, ONLY on that page, into a file or something?

eveo
  • 2,797
  • 15
  • 61
  • 95
  • 1
    i'm pretty sure there's a tool that will tell you what parts of a stylesheet are unused for a particular page (meaning the rest would be what IS used) can't remember the name though. – Kevin B Apr 14 '14 at 18:32
  • Generating an array of classes and id's used in a page would be easy, however using that to figure out what style declarations were in use sounds difficult. – Kevin B Apr 14 '14 at 18:33
  • No, just need all classes and ID's of any core CSS used. All general CSS is in my jQueryMobile.css, which I don't need, just need the classes I explicitly stated in my html page that refer to a specific css file. How would I do that @KevinB – eveo Apr 14 '14 at 18:34
  • 1
    you can use the Chrome Dev Tools' `Audits` tab to see what all CSS rules are active but not being used on the current page. Maybe you could hook into that list and compare that to the results from what @KevinB is suggesting? – Jordan Foreman Apr 14 '14 at 18:35
  • There's a Firefox add-on, called [Dust-Me Selectors](https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/), which I've never used, but I've heard others report it as effective. – David Thomas Apr 14 '14 at 21:38

1 Answers1

1

To get an array of classes/id's in use, loop over every element in the document and populate an array. Obviously this isn't very efficient, but considering the task at hand, i doubt that is a concern.

var idArr = [];
var classArr = [];
[].forEach.call(document.querySelectorAll("*"), function(element){
    if (element.id && idArr.indexOf(element.id) == -1) {
        idArr.push(element.id);
    }
    if (element.className) {
        var tempClassArr = element.className.split(" ");
        for (var i = 0; i < tempClassArr.length; i++) {
            if (classArr.indexOf(tempClassArr[i]) == -1) {
                classArr.push(tempClassArr[i]);
            }
        }
    }
});
console.log(idArr);
console.log(classArr);

http://jsfiddle.net/QLmNf/1/

This will give you an array of ID's and an array of classes on the page. you would then need to compare this to the style declarations to find ones that match. This of course won't cut out declarations that use these id's and classes but don't actually match any elements on the page, you might be able to solve that problem with the audits tab suggested by @jordanforeman.

Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • Though... i don't see why you would even need these arrays if you can instead use the result from the audit tab. it will give you a list of declarations that aren't being used. If you removed those from the sheet, you would be left with the ones that ARE being used. – Kevin B Apr 14 '14 at 18:53
  • The audits tool is great, however, I wish it told me what IS being used on a page from a specific stylesheet. – eveo Apr 15 '14 at 15:29