7 ms·

PurifyCSS – Remove unused CSS

231 points by k8t 11y ago

gpvos 11y ago
Nice. But from the description, it apparently doesn't work if you construct class names by string manipulation (like "item_" + (selected ? "selected" : "")). Maybe you shouldn't do that anyway, though.
- k8t 11y ago
  Ah, thanks for noticing. Actually, with the current implementation, it would still work I believe
- white-flame 11y ago
  Even worse, I've sometimes done things like $(...).addClass("bg" + getSomeClassIdentifier(obj)) Linking some string hanging off some runtime object to its CSS class usage quickly runs into halting problem issues. There are certainly some arguments to keeping class names as opaque magic strings, but given certain levels of dynamic complexity and the lack of tools like CSS class inheritance, naming policy is sometimes far cleaner and more manageable. Also, there is a minor concern about false positives. If you have a class called "name" or something generic like that, the odds of that string appearing in non-CSS usage your source code is fairly high.
Brajeshwar 11y ago
This is nice. Just in case, you might also like to look at the likes of https://github.com/giakki/uncss https://github.com/giakki/uncss
- k8t 11y ago
  Yes! that is a great library. Unfortunately, that library does not automatically detect the classes used in JS. So we thought we could give it a try to make one that would detect classes used in JS by default
cschep 11y ago
super awesome.
cblock811 11y ago
This could be really useful when I do a major refactor later this year. Thanks.
- mkagenius 11y ago
  Kind of funny. Although maybe true.
Spidy88 11y ago
Mobile developers dream tool!
sdtsui 11y ago
Cool. Nice work!
shogun21 11y ago
When it says it works on single-page apps, does that mean ONLY single page apps?
- k8t 11y ago
  Thanks for giving a heads up. It works with all apps. We just put the emphasis on SPAs. Updated readme for this
aaggarwal 11y ago
This is a very handy tool. I have a question, would it be able to take wildcard and recursive argument for filepath of HTML, JS? Thanks.
milkworsethan 11y ago
So basically it's a tool to remove the mess that we've created? Maybe we shouldn't have done so in the first place.
- k8t 11y ago
  Ha! that's one way of putting it. Another use case would be if you were to use a CSS framework (Bootstrap, Foundation) and you don't utilize all of it (they are both ~6k line files)
- rectangletangle 11y ago
  But we're just so good at creating messes!
- psychometry 11y ago
  Do you also scorn at the existence of debugging tools because we should've written the code correctly the first time?
- hinkley 11y ago
  Half the time, I use tools the way a race car driver uses a five point harness. The things let me move at a pace that would otherwise be dangerous. The rest of the time I use it to illustrate when we aren't living up to agreements that we've already made.
- mkagenius 11y ago
  I am looking for best practices for CSS. Can someone point me to one they found really useful?
simonw 11y ago
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.
- Zikes 11y ago
  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.
  - spanktar 11y ago
    +1 for something along these lines to be available in all vendor's dev tools!
    - WhiteNoiz3 11y ago
      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).
  - deleted 11y ago
    [deleted]
  - Existenceblinks 11y ago
    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.
frandroid 11y ago
This looks awesome. If it did a second run to look up where the CSS comes from in my SASS and remove the SASS instead, that would be magical. :D
- inostia 11y ago
  Couldn't you just add a Grunt task to purify the compiled SASS?
  - jonahx 11y ago
    This would miss the point. Sure, it would still lighten the css file downloaded by the client, but it would do nothing to clean up the source file developers work with and thus lighten their cognitive burden, which imo is more important.
- emitstop 11y ago
  Until someone makes that, you should be able to just diff the two files, see what sections were removed and go based on that.
JuanSoto 11y ago
>Able to also detect dynamically-loaded CSS classes in your javascript. Awesome! I worked with a tool like this that did not have dynamically loaded classes in mind. For people not sure on how to use this, I personally use tools like these when working with a CSS framework.
brokentone 11y ago
The dynamic class allocation here looks really robust and amazing. Huge concern in similar libraries.
peterbe 11y ago
I use a similar tool on my personal site (www.peterbe.com) It also inlines all CSS but only does so with the selectors that are actually ever used. Go to http://www.peterbe.com/plog/mincss http://www.peterbe.com/plog/mincss and click to view source. 120Kb of bootstrap excess baby!
brightball 11y ago
This setup is ideal IMO. Keep your existing files, like bootstrap, intact in case you ever DO use them but integrate this into your deploy process to do compression and minification prior to getting out to your server. Workflow wise, this is a huge win.
geuis 11y ago
I created and maintain Helium. https://github.com/geuis/helium-css https://github.com/geuis/helium-css The problem with the PurifyCSS approach, like so many before it, is that you cannot really do this accurately from the server. It has to be done in the browser. Helium is a dev tool. It takes a list of sample urls from the developer because its presumed the engineer will be able to make the best choice as to pages that represent all the aspects of their site. It will work in any web page regardless of framework, because ultimately its all just web pages. Helium will find the actual style sheets loaded into each page, then at the end of the scan give you an accurate and realistic report of the css selectors that were not found anywhere in your site. There are some minor limitations, such as the inability to test for user-interactions with pseudo selectors like :active, :focus, :hover, etc.
- jamesdelaneyie 11y ago
  As a designer that would love this tool for the speed and cleanliness factor it would give, i have a few other Qs: 1. Does it spit out a css file or multiple css file I can use immediately? Can i actually amend a local document with it, or do I have to copy paste? 2. Does it give any critique on poor selector methods? Definitely have a few foolish ways of doing things that could be improved with a little bit of "hey...stop that" feedback, in my work 3. ??? PROFIIT 4. Can it give me a few stats on the css to benchmark it? You're already showing me the unused ccs selectors, can you present other data that you could present to your boss and say hey...look at this, this is why it's worth doing this stuff 5. Known browser issues highlighted. "Hey! In IE8...that div ACTUALLY does this". Also, heres how to fix it. Insta–contextual documentation. As I say that I realise I'm asking for Clippy back in a way so I shall bow out. Responsive design? worth thinking about...anyway! Really interesting project! I'm going it use it this weekend and see how it goes :)
  - geuis 11y ago
    It doesn't modify your css files. That's your job. It gives you a report of unused selectors. It can't test pseudo selectors requiring human interaction.
weinzierl 11y ago
How do you do this for JavaScript? In Java I used a mixture of static analysis[1] and code coverage[2] with great success. For JavaScript there seem to be many (dead) coverage tools but nothing comparable to UCDetector. [1] http://www.ucdetector.org/ http://www.ucdetector.org/ [2] http://www.eclemma.org/jacoco/trunk/doc/ http://www.eclemma.org/jacoco/trunk/doc/
Existenceblinks 11y ago
I _think_ it shouldn't be too much code. For my rails project, I wrote a simple shell script[1] to get all unused css classes and remove it my hand in final step, to make sure i will not remove css classes that actually used (e.g pre-define and use in future, overriding of third party css class) The script basically does: 1. Use REGEX match all css classes, `cat` into one place 2. Read the class line by line and search in html,js files to see if this css is used (even support #addClass from js) 2.1 it also supports several class adding styles e.g. class="abc", class: "abc", :class=> 'abc' or even "xxx" class in this: class="abc xxx ijk" 2.2 People even do this in js: $modal.append($('<div class="modal-close-icon"></div>')); and the REGEX can also detect this lol. [1] https://gist.github.com/50kudos/3028fac585eda85aea9a https://gist.github.com/50kudos/3028fac585eda85aea9a You can adapt my REGEX, and custom your directory where those css files are in. Simply copy the code and save into your filename.sh, and can run safely because my script don't write any file of your project.
namuol 11y ago
Like most CSS tooling, this is a treatment for a symptom of an underlying disease: the inherently global nature of CSS[1]. Rather than "blob" all your CSS together, and then "de-blob" it, why not build your CSS dynamically based on what components your app is using? [1] I strongly encourage you to watch this talk: https://vimeo.com/116209150 https://vimeo.com/116209150
- bpicolo 11y ago
  Because it slows down your app by a relevant amount. Edit: I see we're referring to inline styles instead of requirecss. In that case, it's because code reusability becomes a pita and you bloat your JS.
  - marcosdumay 11y ago
    > In that case, it's because code reusability becomes a pita and you bloat your JS. Does it? Last time I had a bigish web project, I was starting to inline everything (CSS and Javascript), and had my backend language deal with DRY. It even solved the problem CSS people use CSS generators for. As a rule, both CSS and javascrit suck for organizing content. But then, I declared that project dead, and didn't wait to see the consequences of organizing things this way. So, somebody may have a much clear understanding about why that's wrong.
  - Udo 11y ago
    There's another way besides inlining and requirejs. In cases where you're doing server-side programming anyway, you can just have the server inject view-specific <link> elements pointing to individual CSS files as needed - augmenting the site's core CSS file. The downside is more requests to fetch those files, but after the first time you can take advantage of the browser's cache. As long as you keep the number of extra CSS files reasonable, this method costs almost nothing. A variant of this is where you compile one CSS file from many view-specific ones beforehand. The advantage is it'll speed up things on the client side and the programming overhead is relatively small if you're using something to generate CSS anyway.
- emitstop 11y ago
joeyspn 11y ago
Apparently it also has a gulp plugin: https://github.com/purifycss/gulp-purifycss https://github.com/purifycss/gulp-purifycss (just in case you were also wondering) =)
dsernst 11y ago
This is awesome and makes so much sense, great work team.
d4ncer 11y ago
This is amazing.
welder 11y ago
Would this work with https://github.com/jaysonsantos/jinja-assets-compressor https://github.com/jaysonsantos/jinja-assets-compressor?
mschuster91 11y ago
What is the actual performance advantage gained in contrast to a simple minifier? Given today's CPU speeds, I think the only thing you can save with this tool is bandwidth on mobile and even with this, the effort is not always worth the resulting speed gains as mobile networks get faster and faster.
deleted 11y ago
[deleted]
henryng24 11y ago
AWESOME!! this is just what i was looking for!!
Cengkaruk 11y ago
Cool. I will try later. I'm using UnCSS[0] with Gulp. What is the different with UnCSS? [0] https://github.com/giakki/uncss https://github.com/giakki/uncss
prayerslayer 11y ago
An alternative to this is symdiff http://symdiff.github.io/ http://symdiff.github.io/ (Disclaimer: I'm the author). The auto-remove part you would have to code yourself though.
kanakiyajay 11y ago
Wrote a quick tutorial http://grunt-tasks.com/grunt-purifycss/ http://grunt-tasks.com/grunt-purifycss/ on how to use it with grunt and grunt-usemin

231 points by k8t 11y ago

gpvos 11y ago

Nice. But from the description, it apparently doesn't work if you construct class names by string manipulation (like "item_" + (selected ? "selected" : "")). Maybe you shouldn't do that anyway, though.

k8t 11y ago
Ah, thanks for noticing. Actually, with the current implementation, it would still work I believe
white-flame 11y ago
Even worse, I've sometimes done things like $(...).addClass("bg" + getSomeClassIdentifier(obj)) Linking some string hanging off some runtime object to its CSS class usage quickly runs into halting problem issues. There are certainly some arguments to keeping class names as opaque magic strings, but given certain levels of dynamic complexity and the lack of tools like CSS class inheritance, naming policy is sometimes far cleaner and more manageable. Also, there is a minor concern about false positives. If you have a class called "name" or something generic like that, the odds of that string appearing in non-CSS usage your source code is fairly high.

Brajeshwar 11y ago

This is nice. Just in case, you might also like to look at the likes of https://github.com/giakki/uncss https://github.com/giakki/uncss

k8t 11y ago
Yes! that is a great library. Unfortunately, that library does not automatically detect the classes used in JS. So we thought we could give it a try to make one that would detect classes used in JS by default

cschep 11y ago

super awesome.

cblock811 11y ago

This could be really useful when I do a major refactor later this year. Thanks.

mkagenius 11y ago
Kind of funny. Although maybe true.

Spidy88 11y ago

Mobile developers dream tool!

sdtsui 11y ago

Cool. Nice work!

shogun21 11y ago

When it says it works on single-page apps, does that mean ONLY single page apps?

k8t 11y ago
Thanks for giving a heads up. It works with all apps. We just put the emphasis on SPAs. Updated readme for this

aaggarwal 11y ago

This is a very handy tool. I have a question, would it be able to take wildcard and recursive argument for filepath of HTML, JS? Thanks.

milkworsethan 11y ago

So basically it's a tool to remove the mess that we've created? Maybe we shouldn't have done so in the first place.

k8t 11y ago
Ha! that's one way of putting it. Another use case would be if you were to use a CSS framework (Bootstrap, Foundation) and you don't utilize all of it (they are both ~6k line files)
rectangletangle 11y ago
But we're just so good at creating messes!
psychometry 11y ago
Do you also scorn at the existence of debugging tools because we should've written the code correctly the first time?
hinkley 11y ago
Half the time, I use tools the way a race car driver uses a five point harness. The things let me move at a pace that would otherwise be dangerous. The rest of the time I use it to illustrate when we aren't living up to agreements that we've already made.
mkagenius 11y ago
I am looking for best practices for CSS. Can someone point me to one they found really useful?

simonw 11y ago

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.

Zikes 11y ago
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.
- spanktar 11y ago
  +1 for something along these lines to be available in all vendor's dev tools!
  - WhiteNoiz3 11y ago
    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).
- deleted 11y ago
  [deleted]
- Existenceblinks 11y ago
  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.

frandroid 11y ago

This looks awesome. If it did a second run to look up where the CSS comes from in my SASS and remove the SASS instead, that would be magical. :D

inostia 11y ago
Couldn't you just add a Grunt task to purify the compiled SASS?
- jonahx 11y ago
  This would miss the point. Sure, it would still lighten the css file downloaded by the client, but it would do nothing to clean up the source file developers work with and thus lighten their cognitive burden, which imo is more important.
emitstop 11y ago
Until someone makes that, you should be able to just diff the two files, see what sections were removed and go based on that.

JuanSoto 11y ago

>Able to also detect dynamically-loaded CSS classes in your javascript. Awesome! I worked with a tool like this that did not have dynamically loaded classes in mind. For people not sure on how to use this, I personally use tools like these when working with a CSS framework.

brokentone 11y ago

The dynamic class allocation here looks really robust and amazing. Huge concern in similar libraries.

peterbe 11y ago

I use a similar tool on my personal site (www.peterbe.com) It also inlines all CSS but only does so with the selectors that are actually ever used. Go to http://www.peterbe.com/plog/mincss http://www.peterbe.com/plog/mincss and click to view source. 120Kb of bootstrap excess baby!

brightball 11y ago

This setup is ideal IMO. Keep your existing files, like bootstrap, intact in case you ever DO use them but integrate this into your deploy process to do compression and minification prior to getting out to your server. Workflow wise, this is a huge win.

geuis 11y ago

I created and maintain Helium. https://github.com/geuis/helium-css https://github.com/geuis/helium-css The problem with the PurifyCSS approach, like so many before it, is that you cannot really do this accurately from the server. It has to be done in the browser. Helium is a dev tool. It takes a list of sample urls from the developer because its presumed the engineer will be able to make the best choice as to pages that represent all the aspects of their site. It will work in any web page regardless of framework, because ultimately its all just web pages. Helium will find the actual style sheets loaded into each page, then at the end of the scan give you an accurate and realistic report of the css selectors that were not found anywhere in your site. There are some minor limitations, such as the inability to test for user-interactions with pseudo selectors like :active, :focus, :hover, etc.

jamesdelaneyie 11y ago
As a designer that would love this tool for the speed and cleanliness factor it would give, i have a few other Qs: 1. Does it spit out a css file or multiple css file I can use immediately? Can i actually amend a local document with it, or do I have to copy paste? 2. Does it give any critique on poor selector methods? Definitely have a few foolish ways of doing things that could be improved with a little bit of "hey...stop that" feedback, in my work 3. ??? PROFIIT 4. Can it give me a few stats on the css to benchmark it? You're already showing me the unused ccs selectors, can you present other data that you could present to your boss and say hey...look at this, this is why it's worth doing this stuff 5. Known browser issues highlighted. "Hey! In IE8...that div ACTUALLY does this". Also, heres how to fix it. Insta–contextual documentation. As I say that I realise I'm asking for Clippy back in a way so I shall bow out. Responsive design? worth thinking about...anyway! Really interesting project! I'm going it use it this weekend and see how it goes :)
- geuis 11y ago
  It doesn't modify your css files. That's your job. It gives you a report of unused selectors. It can't test pseudo selectors requiring human interaction.

weinzierl 11y ago

How do you do this for JavaScript? In Java I used a mixture of static analysis[1] and code coverage[2] with great success. For JavaScript there seem to be many (dead) coverage tools but nothing comparable to UCDetector. [1] http://www.ucdetector.org/ http://www.ucdetector.org/ [2] http://www.eclemma.org/jacoco/trunk/doc/ http://www.eclemma.org/jacoco/trunk/doc/

Existenceblinks 11y ago

I _think_ it shouldn't be too much code. For my rails project, I wrote a simple shell script[1] to get all unused css classes and remove it my hand in final step, to make sure i will not remove css classes that actually used (e.g pre-define and use in future, overriding of third party css class) The script basically does: 1. Use REGEX match all css classes, `cat` into one place 2. Read the class line by line and search in html,js files to see if this css is used (even support #addClass from js) 2.1 it also supports several class adding styles e.g. class="abc", class: "abc", :class=> 'abc' or even "xxx" class in this: class="abc xxx ijk" 2.2 People even do this in js: $modal.append($('<div class="modal-close-icon"></div>')); and the REGEX can also detect this lol. [1] https://gist.github.com/50kudos/3028fac585eda85aea9a https://gist.github.com/50kudos/3028fac585eda85aea9a You can adapt my REGEX, and custom your directory where those css files are in. Simply copy the code and save into your filename.sh, and can run safely because my script don't write any file of your project.

namuol 11y ago

Like most CSS tooling, this is a treatment for a symptom of an underlying disease: the inherently global nature of CSS[1]. Rather than "blob" all your CSS together, and then "de-blob" it, why not build your CSS dynamically based on what components your app is using? [1] I strongly encourage you to watch this talk: https://vimeo.com/116209150 https://vimeo.com/116209150

bpicolo 11y ago
Because it slows down your app by a relevant amount. Edit: I see we're referring to inline styles instead of requirecss. In that case, it's because code reusability becomes a pita and you bloat your JS.
- marcosdumay 11y ago
  > In that case, it's because code reusability becomes a pita and you bloat your JS. Does it? Last time I had a bigish web project, I was starting to inline everything (CSS and Javascript), and had my backend language deal with DRY. It even solved the problem CSS people use CSS generators for. As a rule, both CSS and javascrit suck for organizing content. But then, I declared that project dead, and didn't wait to see the consequences of organizing things this way. So, somebody may have a much clear understanding about why that's wrong.
- Udo 11y ago
  There's another way besides inlining and requirejs. In cases where you're doing server-side programming anyway, you can just have the server inject view-specific <link> elements pointing to individual CSS files as needed - augmenting the site's core CSS file. The downside is more requests to fetch those files, but after the first time you can take advantage of the browser's cache. As long as you keep the number of extra CSS files reasonable, this method costs almost nothing. A variant of this is where you compile one CSS file from many view-specific ones beforehand. The advantage is it'll speed up things on the client side and the programming overhead is relatively small if you're using something to generate CSS anyway.
emitstop 11y ago

joeyspn 11y ago

Apparently it also has a gulp plugin: https://github.com/purifycss/gulp-purifycss https://github.com/purifycss/gulp-purifycss (just in case you were also wondering) =)

dsernst 11y ago

This is awesome and makes so much sense, great work team.

d4ncer 11y ago

This is amazing.

welder 11y ago

Would this work with https://github.com/jaysonsantos/jinja-assets-compressor https://github.com/jaysonsantos/jinja-assets-compressor?

mschuster91 11y ago

What is the actual performance advantage gained in contrast to a simple minifier? Given today's CPU speeds, I think the only thing you can save with this tool is bandwidth on mobile and even with this, the effort is not always worth the resulting speed gains as mobile networks get faster and faster.

deleted 11y ago

[deleted]

henryng24 11y ago

AWESOME!! this is just what i was looking for!!

Cengkaruk 11y ago

Cool. I will try later. I'm using UnCSS[0] with Gulp. What is the different with UnCSS? [0] https://github.com/giakki/uncss https://github.com/giakki/uncss

prayerslayer 11y ago

An alternative to this is symdiff http://symdiff.github.io/ http://symdiff.github.io/ (Disclaimer: I'm the author). The auto-remove part you would have to code yourself though.

kanakiyajay 11y ago

Wrote a quick tutorial http://grunt-tasks.com/grunt-purifycss/ http://grunt-tasks.com/grunt-purifycss/ on how to use it with grunt and grunt-usemin