Ruby, a message to you

Update: CSSes is now a gem! No need to install the plugin for each app.

I’ve updated CSSes to handle a bunch more Rails HTML helpers, so your forms and images and links should all get the proper treatment and their own nicely alphabetized entries in the generated application.css file.

See it in action!

Say you have this view (though let it be known that CSSes scours your helpers, too):

<h1 id="pomp">The Grand Demonstration</h1>
<p class="wing">Super Mario Bros. 3 reference</p>
<%= image_tag('joy.png', :class => 'happy') %>
<%= link_to('Read', {:action => :read, :id => 4}, {:id => 'four'}) %>
<!-- and it works for form tags too -->

Do this:

script/generate csses

And look at that sweet generated application.css:

a {}
a:visited {}
a:hover {}
a:active {}
a#four {}
a#four:visited {}
a#four:hover {}
a#four:active {}
h1 {}
h1#pomp {}
img {}
img.happy {}
p {}
p.wing {}

Get it for yourself:

sudo gem install csses

I try to follow some good guidelines when developing a website. I separate content from style with CSS, for example, by judiciously using class and id attributes for html elements. Of course, I also usually leave the styling until the content has been mostly completed. The problem with that, though, is I end up with many views and many helpers that reference class and id attributes for elements I haven’t styled yet.

So I made CSSes. It searches helpers and views (you’re not putting style information in your controllers or models are you?) for references to html entities, and creates a bare-bones CSS file.

It has a few shortcomings. It doesn’t yet handle link_to* or image_tag or any of the form building methods, just raw referenced html. It’s only Rails 2.0.x friendly so far. It makes just one file, public/stylesheets/application.css, and you can’t control the name. If you use the < character in html attribute values, it will probably make a little noise. It doesn’t have any unit tests.

But! It was sure nice to run after working on a site for a while and finding this waiting for me:

body {}
div {}
div#author_bio {}
div#author_url {}
div#chapbook_exceprt {}
...
div.chapbook_links {}
div.poem_content {}
div.poem_links {}
...
h1 {}
h1#author_name {}
h1#chapbooks_header {}
...

Get it:

sudo gem install csses

Run it:

script/generate css

Any help at all would be greatly appreciated; it’s pretty raw. But I plan on making it more robust and more fun.

Update!: We’ve got tests, automatic anchor tag pseudo-classes, and basic link_to* and image_tag support (figuring out how to handle class and id attributes in rails helpers is a little trickier than I guessed at first). AND: it’s a gem now.