Sunday, September 21, 2008

Nested Styles with Ruby and FrontCompiler

Nested styles is a feature which some people dream about for quite a long time. The idea is pretty simple and beautiful.

Say you have got some css like that.

div.article div.title {
font-weight: bold;
}
div.article div.title a.author {
padding-left: 12px;
background: url('user.png') no-repeat left;
}
div.article div.text {
border: 1px solid #EEE;
background: #FEF;
}

And now imagine that you could write it with nested constructions like that.

div.article {
div.title {
font-weight: bold;

a.author {
padding-left: 12px;
background: url('user.png') no-repeat left;
}
}
div.text {
border: 1px solid #EEE;
background: #FEF;
}
}

See the difference? How much more simple, clean and DRYish your css could be! Unfortunately current browsers don't support such things. At lest not yet.

So, does anybody want to sit down and wait for the future coming?

No, say 'no', you don't need tell such terrible things, because we have added the feature emulation in the FrontCompiler project. Which is a JavaScript/CSS/HTML processor written in Ruby and which can be used as a Rails plugin.

From now one, each time when you process a css file with FrontCompiler, it will automatically convert your nested styles in the way browsers can understand. So you can easily and safe use the nested styles advantages.

Have fun!

3 comments:

glenngillen said...

Nice work. You can achieve a similar result using the Sass part of HAML, including doing math within your CSS.

Mina said...

I've been using CSS Dryer under rails to implement this along with other things to make CSS more programmer-friendly.

Nikolay V. Nemshilov aka St. said...

2 Mina,

Yes, I know about the CSS DRYier, honestly I've taken the idea at the project.

The point is that I want FrontCompiler be an all-in-one thing for the front-side sources processing. It compacts JavaScript, CSS, HTML, so I have added the Nested Styles support that it was support as well out of the box