#180 Finding Unused CSS
Over time a CSS file can become large and filled with unused selectors. In this episode I show how to use the Deadweight gem to determine which CSS selects you can remove.
- Download:
- source codeProject Files in Zip (959 Bytes)
- mp4Full Size H.264 Video (13.6 MB)
- m4vSmaller H.264 Video (8.7 MB)
- webmFull Size VP8 Video (20.7 MB)
- ogvFull Size Theora Video (16.6 MB)
Geez Ryan, it's barely monday (it's 2.04 cst) and here is your new screencast!
The very little (and good) stuff I know of Rails it's because of you!
Keep up the good work!
Many thanks Ryan !
Ryan, you have an unbelievable talent to create Railscasts for things almost as soon as I think to myself "I wish I knew how to do #{x}".
It's amazing. Keep it up.
Do you have some kind of precog abilities ? This is so spot on with what I wanted to investigate this week :)
thanks for all your work, that's just amazing.
Another great episode! Thanks for your great work Ryan!
Another great one. Many thanks.
Is there anything like this for finding deadweight partials and other view elements?
oops,I think we just need it. :)
although I havn't look into it,but I think it should be very useful, good job,Ryan!
OMG Ryan you are a life saver! I just started working on a site that has 7000 lines of css and was pondering how to cut some of the fat. Thanks a million
I added a command-line tool and an HTTP proxy to make deadweight a bit more flexible a couple weeks ago: http://mojodna.net/2009/09/08/csspring-cleaning.html
It hasn't been merged into aanand's master branch yet because it needs a few tests (care to help?): http://github.com/mojodna/deadweight
Err, better partially merged GitHub link: http://github.com/aanand/deadweight/tree/cli
Ryan, Great Railscast, It would be cool if it could hook into Selenium and find out what selectors are being used by elements inserting into the DOM via JavaScript.
Or what if it could just look at my builders and know about the errors and flash messages... that would be cool too. Otherwise I still love the gem and think it is excellent.
Also I bet when you said: "rake deadweight... say that three times fast" 85% of the people watching said it under their breath three times...
Ryan, Great Railscast, It would be cool if it could hook into Selenium and find out what selectors are being used by elements inserting into the DOM via JavaScript.
Or what if it could just look at my builders and know about the errors and flash messages... that would be cool too. Otherwise I still love the gem and think it is excellent.
Also I bet when you said: "rake deadweight... say that three times fast" 85% of the people watching said it under their breath three times...
I have always known that style-sheets will eventually contain unused selectors, but I never would have thought to look for a utility native to rails for hunting them down. Thank you for the insight!
Cool Stuff. I've always wondered if there was a way to refactor my visual code, but with no kind of layout tests, i didn't see how it was possible.
Great job on the casts dude. Perfect!
any php / shell solution for CSS Diet Program ? thanks.
This is fabulous. I am saved from having to bother improving the documentation!
Folks like Seth have been stellar, since I rarely have the time to work on the thing myself. As he said, we can get some pretty rad features into master as soon as we've got tests for them, so if anyone has a bit of time to do that I would be very grateful.
Nice SC Ryan,
I was looking for something like this for a few weeks now but I still can't find a 100% working solution. The problem is having to deal with lots of pages (1000+) some of which are dynamically generated (and have generated urls). Now removing any css style from a huge website might break something somewhere so unless there's a 100% solution, this is very hard to do.
Cheers,
Cezar
Simply shaweet, I've wasted so many hours trying to clean up my css before. This is going to help a ton. Thanks Ryan... again.
Thanks a lot Ryan. You are contributions are really great.
:)
Ryan,
Nice tutorial though, like always. :)
You should do something about these spam comments.
Rayn,
Nice work.. Keep it up.
Thanks for another great screencast Ryan. May I request a screencast on twitter in a rails app. I would like to see your approach to that.
Hey Ryan, why don't you use some sort of captcha for your comments to avoid all these spam posts...
Thanks, Ryan! Great 'cast!
Another way to prevent all rake tasks from blowing up in environments without some gems (but where the tasks won't ever run) is to put the require statements inside of the tasks that use the gems. We do this and it's cleaner (I think) than a begin/rescue/end block at the top of the file.
i am new ro ruby/gems. I just want to use deadweight to detect unused css in my web application.
I have the following installed
# ruby version : 1.8.5
# gem : 1.3.5
# rails : 2.3.5
I installed rake using the command, gem install --remote rake.
Following was the output.
WARNING: Installing to ~/.gem since /usr/lib/ruby/gems/1.8 and
/usr/bin aren't both writable.
WARNING: You don't have /home/test/.gem/ruby/1.8/bin in your PATH,
gem executables will not run.
Successfully installed rake-0.8.7
1 gem installed
/usr/lib/ruby/gems/1.8/gems/rdoc-2.5.8/lib/rdoc/ruby_lex.rb:67: warning: parenthesize argument(s) for future version
Installing ri documentation for rake-0.8.7...
Installing RDoc documentation for rake-0.8.7...
Now when i try rake command, i get the following error. Not able to find the solution through google.
rake aborted!
No Rakefile found (looking for: rakefile, Rakefile, rakefile.rb, Rakefile.rb)
/home/test/.gem/ruby/1.8/gems/rake-0.8.7/lib/rake.rb:2377:in `raw_load_rakefile'
(See full trace by running task with --trace)
Can you pls help me.
Thanks,
Dev
CSS ( Cascading Style Sheets ) Tutorial - Why CSS ? - Introduction - Css Link Properties / Examples - Css List Properties / Examples - Css Layer Properties / Examples - Css TextBox Properties / Examples - Css Font Properties / Examples - Css Text Properties / Examples - Css Cursor Properties / Examples - Css Background Properties / Examples - Css Table Properties / Examples - Css Scroll Bar Properties / Examples - Tools - Units - Parameters - Template Page - Web Design Tutorial
I have built a tool that does that too. It's called http://unused-css.com This service will explore any site and find unused selectors/rules. You will then be able to download the clean CSS file.
sudo gem install aanand-deadweight
didn't work for me but this did
sudo gem install deadweight
https://github.com/aanand/deadweight/issues/8
Just wanted to point out that I'm working on a gem called "Headhunter" that overtakes Deadweight's functionality and also validates HTML and CSS all in one automagically in your Rails app. For this, it injects itself as middleware into the Rack stack and validates every HTML response that any feature tests triggers.
It would be great to get some feedback, check it out! https://github.com/jmuheim/headhunter
Late to the party here, but I co-wrote a few thousands words about our experiences removing un-used CSS and taking our Rails app CSS codebase down from over 3000 lines to under 1000 lines.
We did things quite lo-fi, with lowly grep and meticulous workflow that involved comparing development app screens (that were in our rewritten CSS) with production app screens (written in the old CSS) and ensuring everything looked the way we wanted it.
https://www.oxbridgenotes.com/articles/css_refactoring_from_append_only_to_modular_css