Railscasts - Finding Unused CSS

#180

Sep 21, 2009

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.

Tags: plugins

Download (18.9 MB, 8:04)

alternative download for iPod & Apple TV (10.8 MB, 8:04)

Read it on ASCIIcasts

Resources

sudo gem install aanand-deadweight

# lib/tasks/deadweight.rake
begin
  require 'deadweight'
rescue LoadError
end

desc "run Deadweight CSS check (requires script/server)"
task :deadweight do
  dw = Deadweight.new
  dw.stylesheets = ["/stylesheets/application.css"]
  dw.pages = ["/", "/feeds", "/about", "/episodes/archive", "/comments", "/episodes/1-caching-with-instance-variables"]
  dw.ignore_selectors = /flash_notice|flash_error|errorExplanation|fieldWithErrors/
  puts dw.run
end

< Previous Episode

Next Episode >

16 comments

1. Roberto Ruiz Sep 21, 2009 at 00:06

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!

Report as Spam

2. Tex Sep 21, 2009 at 00:10

Many thanks Ryan !

Report as Spam

3. Wil Gieseler Sep 21, 2009 at 00:37

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.

Report as Spam

4. Thibaut Barrère Sep 21, 2009 at 00:46

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.

Report as Spam

5. Henrik Hodne Sep 21, 2009 at 00:49

Another great episode! Thanks for your great work Ryan!

Report as Spam

6. Zoloo Sep 21, 2009 at 02:33

Another great one. Many thanks.

Report as Spam

7. Mig Sep 21, 2009 at 07:09

Is there anything like this for finding deadweight partials and other view elements?

Report as Spam

8. Jinzhu Sep 21, 2009 at 07:24

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!

Report as Spam

9. Michael Evans Sep 21, 2009 at 08:10

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

Report as Spam

10. Seth Fitzsimmons Sep 21, 2009 at 08:55

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

Report as Spam

11. Seth Sep 21, 2009 at 08:56

Err, better partially merged GitHub link: http://github.com/aanand/deadweight/tree/cli

Report as Spam

12. Joseph Silvashy Sep 21, 2009 at 10:41

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

Report as Spam

13. Joseph Silvashy Sep 21, 2009 at 10:41

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

Report as Spam

14. Casen Davis Sep 21, 2009 at 11:19

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!

Report as Spam

15. ThinkBohemian Sep 21, 2009 at 14:25

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.

Report as Spam

16. T-Flo Sep 21, 2009 at 14:47

Great job on the casts dude. Perfect!

Report as Spam

17. Ardian Yuli Setyanto Sep 21, 2009 at 20:32

any php / shell solution for CSS Diet Program ? thanks.

Report as Spam

18. Aanand Prasad Sep 22, 2009 at 08:16

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.

Report as Spam

19. Cezar Sep 22, 2009 at 08:35

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

Report as Spam

20. Darren Sep 22, 2009 at 16:54

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.

Report as Spam

21. Gaurav Soni Sep 24, 2009 at 02:39

Thanks a lot Ryan. You are contributions are really great.
:)

Report as Spam

22. Amit Sep 24, 2009 at 10:02

Ryan,
Nice tutorial though, like always. :)
You should do something about these spam comments.

Report as Spam

23. chirag shah Sep 25, 2009 at 05:30

Rayn,
Nice work.. Keep it up.

Report as Spam

24. Ben Sep 26, 2009 at 15:13

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.

Report as Spam

25. Nico Sep 28, 2009 at 13:26

Hey Ryan, why don't you use some sort of captcha for your comments to avoid all these spam posts...

Report as Spam

26. Ed Ruder Nov 14, 2009 at 22:49

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.

Report as Spam

27. Dev May 19, 2010 at 04:30

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

Report as Spam

28. Dusan Jun 22, 2010 at 05:26

Preety much useful. Thanks

Report as Spam

29. webtasarim Jul 15, 2010 at 09:03

Report as Spam

30. iPhone Ringtone Maker for mac Jul 20, 2010 at 18:51

thank you for sharing

Report as Spam

31. Jordan basketball shoes Aug 16, 2010 at 00:40

Thanks for another great screencast Ryan. I was looking for something like this for a few weeks now. thanks for all your work, that's just amazing.

Report as Spam

32. Wholesale hats Aug 20, 2010 at 20:23

Fantastic Read! Looking forward to more! Bookmarked the site and will be back again!

Report as Spam

33. medyum Aug 22, 2010 at 05:29

The information you provided was very useful. Because of your help, thank you.
www.medyumsitesi.com
medyum

Report as Spam

34. Wholesale Electronics Aug 25, 2010 at 01:37

Discount Wholesale Electronics, Wholesale Cell Phones, Electronic Gadgets and More from the Best Dropship Wholesaler

Report as Spam

35. louis vuitton shoes Aug 26, 2010 at 21:04

Thanks for sharing your article. I really enjoyed it. I put a link to my site to here so other people can read it. My readers have about the same interets

Report as Spam

36. css Aug 30, 2010 at 09:55

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

Report as Spam

37. snow boots Aug 30, 2010 at 20:47

thanks for your useful tips, I really like your "scoped" trick for chaining custom methods.

Report as Spam

38. louis vuitton sunglasses Sep 01, 2010 at 21:34

Very good post. Made me realize I was totally wrong about this issue. I figure that one learns something new everyday. Mrs Right learned her lesson! Nice, informative website by the way.

Report as Spam

Finding Unused CSS

16 comments

Add your comment: