Styleaby CSS Plugin // RailsTips.org by John Nunemaker

Styleaby CSS Plugin

December 6th, 2006

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?

Posted by jnunemaker Filed in Plugins

10 Responses to “Styleaby CSS Plugin”

Zach Baker Says:
December 7th, 2006 at 01:25 AM
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…
Kyle Maxwell Says:
December 7th, 2006 at 04:13 AM
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:

http://svn.kylemaxwell.com/rails_plugins/dynamic_stylesheets http://svn.kylemaxwell.com/rails_plugins/dynamic_stylesheets/README
Chris Lloyd Says:
December 7th, 2006 at 04:54 AM
Good idea. Sort of makes CSS object orientated. Borat style, I liking very much.
Jamie Hill Says:
December 7th, 2006 at 06:08 AM
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'
    end
  end
end
strong do
  color '#0f0'
  font_weight 'normal'
end
```
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.
Mislav Says:
December 7th, 2006 at 06:23 AM
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
topfunky Says:
December 7th, 2006 at 12:02 PM
Thanks for the link, but I think what you’re looking for is Myles Byrne’s DCSS plugin:

http://myles.id.au/2006/11/20/introducing-dcss/

http://svn.ducknewmedia.com.au/public/rails_plugins/dcss/

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.
John Nunemaker Says:
December 8th, 2006 at 08:26 PM
@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.
Andy Stewart Says:
December 9th, 2006 at 08:51 PM
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.
John Nunemaker Says:
December 10th, 2006 at 10:51 PM
@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.
Andy Stewart Says:
December 11th, 2006 at 01:14 PM
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. If you have any further comments, just send me an email.

RailsTips.org