Show HN: A Chrome extension that extracts used CSS and combines it into one file | Hacker News Reader

Show HN: A Chrome extension that extracts used CSS and combines it into one file

40 pointsgrezql9 comments

just wanted to share this useful tool with you. I have been looking at something like this for a very long time.

https://chrome.google.com/webstore/detail/css-used/cdopjfddj...

what it does: it analyses your html dom and looks for css classes. Then it extracts it all and combines it into 1 single css file.

I used 5 css framworks which was on 340kb kb. This tool made it 36kb!

View on HN

I'm not convinced.

Your problem was not that your CSS was 340 KBytes, but the simple fact you were using 5 CSS frameworks. And if you start removing unused styles at random, any time you want to work on the site and add features you may encounter edge cases where the style you want to use has been removed. And, if your CSS is used on multiple pages with different layouts, it looks like you will need to manually browse each one and merge the results.

However, this is not to say that merging and compressing stylesheets is bad. If you do so then you can embed the style in the page to remove a render blocking resource and speed up your site. Then you can repeat the same process with Javascript.

It's unfair to claim that styles are removed "at random." And even if you're only using one framework, you'd still almost certainly have unused styles that can be pruned.

Generally, you'd want tools in your build pipeline that do this automatically (see my other post). Doing so solves all your objections. You're free to later use styles that you hadn't been using -- they're still there in the source CSS, so when you rebuild, they just don't get pruned out anymore. And those tools don't just analyze a single html file, they examine your entire source tree, so you don't have problems with styles used on some pages but not others.

Personally, I use the PurifyCSS[1] and PurgeCSS[2] Grunt/Gulp/Webpack modules for this task.

https://github.com/purifycss/purifycss

https://github.com/FullHuman/purgecss

The Purge documentation claims that a third tool, UnCSS[3], may be even more accurate.

https://github.com/uncss

@tofof: Do you have a workflow which uses both of them the tools in series, or do you pick one or the other depending upon what you're doing? PurifyCSS and PurgeCSS, at least from a cursory review, appear to have similar functionality.

You're correct that they're very similar; PurgeCSS even describes itself as an improvement to PurifyCSS. (Purge tries to actually parse for matches, whereas Purify just looks for the presence of words -- so if you have a .arrow CSS rule in your framework, and you happen to use the word 'arrow' in body text somewhere, Purify will needlessly include that style in its output).

But yes, I actually use both tools in series. I get a small reduction from Purifying the output of Purge (I haven't actually bothered to diff it to see where), and Purify stitches the files together and minifies in addition to pruning.

Is there a tool which can intelligently reactor the rules in a CSS file?

So like combine all the same background colour references etc. I suppose this would require HTML changes too, but am interested to see if this has been done.

Given so many webpages have dynamic elements, piece of HTML/DOM that only pop up in edge cases (alerts like cookie notices, loading animations, confirmation dialogs) I would be very wary that a tool would be able to identify all the things that are really in use. To use effectively, I think you would need a test script that stepped through all the edge cases, and then you're depending on your test coverage being 100% (of at least triggering the possible DOM structures and style class configurations).

Here's the source code to the extension: https://github.com/painty/CSS-Used-ChromeExt

I created an experiment to do this 8 years ago (time sure does fly): https://github.com/driverdan/cssess

There have been a bunch of other projects that do this as well. purifycss, purgecss, and uncss among others.

Assuming this works correctly and it looks like it did, this is very handy when refactoring a project using a CSS framework like bootstrap.

I needed something like this to tell exactly what bootstrap components I am using. So later down the road I can completely remove it and rewrite my own, while still have something to reference to

Reply on news.ycombinator.com