December 06, 2006

Posted by John

Tagged plugins

Older: Testing A Multi-Site Application

Newer: Parsing XML With Hpricot

Styleaby CSS Plugin

Update: Andrew Stewart has answered the call with his css_dryer plugin.

According to this article from Geoff, Keith Rowell is working on a plugin in the vein of markaby and builder that will allow you to create your stylesheets in ruby.

Why does this interest me? Well, I’m a web developer who loves to program as opposed to a programmer who dabbles in the web. I love standards and stylesheets and I have a dream. What is this dream? Inheritance is groovy in stylesheets but css declarations like the following annoy the programmer in me, especially the ruby programmer:

div#content {/* some styles ... */}
div#content h2 {/* some styles ... */}
div#content a {/* some styles ... */}
/* etc., etc., you get the point ... */

What I have always dreamed of is, for lack of a better term, stackable css declarations like so:

div#content {
    /* some styles which apply only to div#content ... */
    h2  {/* some styles which apply only to div#content h2 ... */}
    a  {/* some styles which apply only to div#content a ... */}

…which would create the same declarations as above (as far as specificity is concerned). Now, this isn’t possible with css, as of yet, but that doesn’t mean a sweet little css plugin for rails couldn’t make my dreams come true. It doesn’t seem like it would be too hard using ruby blocks to get this syntactical suger.

What I’m hoping is that Keith, or Geoff, or someone else likes this idea as well and adapts the plugin to work in the aforementioned way. If not, maybe I’ll tackle it myself when I get a chance. Anyone else think this would be cool or find it a bit interesting? Is it clear what I’m after?


  1. Me too! I’ve used an RCSS controller to embed ruby in my CSS files and it makes things flow much easier. But I still hope for a Builder-style syntax like you’re describing. It really can’t be all that hard…

  2. Not hard at all. I was just about to write a horrendously long CSS file, but I thought this would be a better use of the evening:

  3. Chris Lloyd Chris Lloyd

    Dec 07, 2006

    Good idea. Sort of makes CSS object orientated. Borat style, I liking very much.

  4. We were looking at something similar a couple of months ago. We’ve not got it into a plugin as yet.

    Something like:

    p do
      color '#c00'
      strong do
        font_weight 'bold'
        em do
          color 'pink'
    strong do
      color '#0f0'
      font_weight 'normal'

    Will output:

    body {
      background: #fff;
      color: #333;
    p {
      color: #c00;
    p strong {
      font-weight: bold;
    p strong em {
      color: pink;

    We’re yet finalise the syntax so any suggestions are welcome. I think attributes should probably be handled with a hash.

  5. Don’t make a builder out of it. Keep the CSS syntax like in the article example.

    BTW you read my mind. It is exactly what I was thinking for some time now

  6. Thanks for the link, but I think what you’re looking for is Myles Byrne’s DCSS plugin:

    It lets you write with a syntax very similar to CSS, but you get nested blocks and can use ERB tags.

    Mine is a modification of something Scott Barron started and is much closer to Markaby in syntax…it’s all Ruby.

  7. @Kyle – nice.

    @Jamie – hmm…yes along those lines except I don’t think I would take it quite that far. Very cool though.

    @Mislav – Agreed.

    @topfunky – Myles plugin looks pretty close to what I’m thinking of but looks like to much syntax. I’m thinking maybe I’ll just try doing something like this on my own since I’m the one being picky. Thanks for the clarification on what yours is.

  8. I liked this idea so much that I sat down and wrote the code to do it, using your example as a test case.

    I’ll convert it into a plugin tomorrow and post you a link.

  9. @Andy – You are my new hero. Let me know when you get it working and I’ll help you beta test and post it here when you are ready for it to be consumed.

  10. John,

    Excellent! I would greatly appreciate your beta-testing and posting it.

    I’ve called it css_dryer and you can grab it here. I’ve also written it up here.

    Looking forward to your feedback!

Sorry, comments are closed for this article to ease the burden of pruning spam.


Authored by John Nunemaker (Noo-neh-maker), a programmer who has fallen deeply in love with Ruby. Learn More.


Release your software more often with fewer problems.
Flip your features.