PurifyCSS – Remove unused CSS

Re:PurifyCSS – Remove unused CSS by simonw on Friday June 12, 2015 @03:18PM (#9707977)

I've been looking into this kind of tool for a while, but none of them are quite right for my purpose. I don't want a tool that spits out just-the-CSS-that-is-used, I want a tool that shows me blocks of CSS that it thinks are NOT used - ideally after I've loaded a number of different pages in a browser.

My use-case is for analyzing a large, existing website that has many years of accumulating CSS, and getting a feel for which blocks of code can be safely eliminated.

I'm pretty sure what I'm after needs a full-blown DOM to work effectively - either with something like PhantomJS or even running as a Chrome Extension. So far I haven't seen anything that fits the bill.

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by Zikes on Friday June 12, 2015 @03:21PM (#9707999)

I honestly think this needs to be a part of Chrome Dev Tools's profiler. Already it's able to record sessions that persist across page loads, and tracks what CSS selectors are applied and which properties are overridden. I don't think it's much of a stretch to add a feature like this.

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by spanktar on Friday June 12, 2015 @03:27PM (#9708031)

+1 for something along these lines to be available in all vendor's dev tools!

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by WhiteNoiz3 on Friday June 12, 2015 @03:38PM (#9708088)

Agreed! We need something that collects data from multiple pages as you browse through and use your site. At the end it gives you a table of all your classes that didn't match anything (with line number references to your css file).

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by Existenceblinks on Friday June 12, 2015 @09:14PM (#9709471)

Though you need to manually visit all those pages. And it wouldn't be easy to traverse DOM with those server side logic/condition.

IMHO, do it offline and out of browser would be easier. But I also think doing it directly with the codes can be hard too since there are so many way that those css will be added to templates.

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by LoSboccacc on Saturday June 13, 2015 @01:08AM (#9709967)

Unless the pages are dynamically generated

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by thousande on Friday June 12, 2015 @06:31PM (#9708967)

Firefox dev tools have something like that (experimental)

https://developer.mozilla.org/en-US/docs/Tools/CSS_Coverage

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by geuis on Friday June 12, 2015 @04:26PM (#9708304)

https://github.com/geuis/helium-css

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by bjterry on Friday June 12, 2015 @11:09PM (#9709733)

I have used a Firefox extension called Dust-Me Selectors[1] which does this. It breaks your css into used and unused selectors, it can spider the site for you, or you can leave it running as you browse the site and it will work automatically. Definitely slows things down though while you're using it.

1: https://addons.mozilla.org/en-US/firefox/addon/dust-me-selec...

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by miniatureape on Friday June 12, 2015 @06:05PM (#9708854)

100% safety is pretty difficult, but take a look at the tool described here starting at slide 60, http://talks.desp.in/fronteers2014

It's fairly easy to roll your own version of this and do analysis.

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by Existenceblinks on Friday June 12, 2015 @06:16PM (#9708901)

I might be wrong but I'm glad to see you try using this REGEX https://news.ycombinator.com/item?id=9708629

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by Sir_Cmpwn on Friday June 12, 2015 @08:01PM (#9709287)

How about running a diff on pre-purify versus post-purify?

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by tlrobinson on Saturday June 13, 2015 @02:05AM (#9710072)

Chrome dev tool's audit tab has an "unused CSS" section. Have you tried that?

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by Imagenuity on Saturday June 13, 2015 @03:40PM (#9712327)

Thanks, didn't know this was there. It is somewhat buried, but does give you a list of unused selectors.

[ Parent | on HN ]

Re:PurifyCSS – Remove unused CSS by EC1 on Saturday June 13, 2015 @12:52AM (#9709919)

I built something like this at my old company. Scrape every tag on the current page, subtract this array of used tags against all the tags in the CSS. Didn't take too long to build.

[ Parent | on HN ]