
Show HN: A Chrome extension that extracts used CSS and combines it into one file - grezql
just wanted to share this useful tool with you. I have been looking at something like this for a very long time.<p><a href="https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;css-used&#x2F;cdopjfddjlonogibjahpnmjpoangjfff?hl=en" rel="nofollow">https:&#x2F;&#x2F;chrome.google.com&#x2F;webstore&#x2F;detail&#x2F;css-used&#x2F;cdopjfddj...</a><p>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.<p>I used 5 css framworks which was on 340kb kb. This tool made it 36kb!
======
consto
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.

~~~
tofof
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.

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

[https://github.com/purifycss/purifycss](https://github.com/purifycss/purifycss)

[https://github.com/FullHuman/purgecss](https://github.com/FullHuman/purgecss)

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

[https://github.com/uncss](https://github.com/uncss)

~~~
Mtinie
@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.

~~~
tofof
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.

------
Anm
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).

------
driverdan
Here's the source code to the extension: [https://github.com/painty/CSS-Used-
ChromeExt](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](https://github.com/driverdan/cssess)

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

------
Kagerjay
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

