Marat Denenberg has continued the trend of CSS frameworks by taking Mootools and creating CSS.js.

The library sits on top of CSS itself and gives you:

Programmatic CSS

Browser Compatibility

Custom CSS Properties

With programmatic css, you can use loops to generate CSS that might have taken pages to type out. You can have CSS constants. You can do all sorts of math and calculations for a property. You can also modify the style of elements on the fly, without using javascript on each element. I’m sure there’s other cool stuff you can do that I didn’t think of.

Browser compatibility is sort of self-obvious. Before, you used to have a style sheet for each browser to allow for their quirks and weird CSS implementation. Now you can generate CSS that is browser specific using JS. The class is built to allow you to extend it for any browser and any property. You can specify a property to be limited, in which case it will only generate it for the browser you specify.

Ever wanted to invet your own CSS property? Now you can. See the examples for what I mean.

Manipulating CSS rules instead of individual styles is much faster for large collections of objects. This has been debated and proven on the jQuery mailing lists, and there is now a jQuery plugin, jQuery.Rule to animate through CSS. In that way, this is very useful. Also consider that fixing IE’s opacity and manipulating border-radius is much easier (and almost always done) through JS than server-side.
.
I do agree that in general relying on JS to display basic page layout is a bad idea. However, things like column layouts, opacity, min/max height/width and margin: auto in IE, RGBA colors and other (CSS3 standard properties) are properly implemented for all browsers in CSS, there’s always going to be some JS in page styling. Coming from print layout, it’s amazing the basic techniques that can’t be used to style webpages — all due to lack of browser support.
.
As long as the page is readable, functional, and accessible on load without JS, do whatever you want to the style afterwards.

border-radius, opacity, screen width and resolution are client side issues, how would you fix that on the server?
IMHO, the solution involves css generation on the server(from a framework, with inheritance) and client side fixes in js.
@K9 how behaviour is related to css generation? ins’t intended for events(selecting elements by css selectors…)?

Comment by devsmt — November 30, 2007

As said by Charles, jQuery.Rule can manage CSS rules objects, with the difference that the creation,manipulation and filtering is done in a “jQuery-ish” way.
Although what Charles said about animation is true, that specific part stills needs a couple of workarounds for IE.