CSS dinamici con Javascript

Tempo fa qui su Edit si è discusso della bontà  di un'idea come quella di introdurre nei CSS logiche e metodi tipici dei linguaggi di programmazione. Nel post venivano segnalate anche alcune soluzioni server-side per ottenere il risultato.

Un nuovo plug-in per MooTools molto interessante chiamato Css.js permette di applicare degli stili CSS agli elementi del nostro DOM in modo dinamico, agendo però sul lato client. Nelle parole dell'autore, è una tecnica utile non solo per implementare CSS dinamici e programmati, ma anche per risolvere facilmente problemi di compatibilità  tra i browser e per creare proprietà  personalizzate.

La sintassi da utilizzare per aggiungere le regole di stile sono le stesse che si userebbero in un normale foglio CSS. Prima di tutto creiamo un'istanza della classe CSS, richiamamiamo il metodo add_rules e passiamogli un oggetto le cui proprietà  di tipo stringa sono un ulteriore oggetto che rappresenta le regole CSS desiderate:

var css = new CSS();
css.add_rules({
    'p.code':
    {
        'white-space': 'pre'
    },
    'p.title, a.myLink':
    {
        'color': '#ff0000',
        'margin-top':: '10px'
    }
}).refresh();

In questo modo abbiamo dichiarato le nostre nuove regole dinamiche. Inoltre, è possibile creare delle proprie regole personalizzate (in base ad esempio al tipo di browser utilizzato) grazie al metodo implement nativo del costruttore Class:

CSS.implement({
    'trident_opacity': function(value, property)
    {
        return ['filter', 'alpha(opacity=' + (value * 100) + ')'];
    }
});

Su Ajaxian molti commenti si soffermano sul fatto che certe cose sarebbe meglio affidarle al lato server. Voi che ne pensate?