Show HN: CSS Meta-Language in Javascript

This was an attempt to make css more accessible to javascript. It just happened to solve a lot of the same problems as less and sass as a side-effect. I'll start with a few examples and then break out the code and explain it...

Here's a generic example:

    css // Begin CSS

    ( "selector1" )
    ({
        property1: value,
        property2: value,
        // ...
    })

    ( "selector2" )
    ({
        property1: value,
        property2: value,
        // ...
    })

    ; // End CSS

Some less and sass features (Variables, Mixins, etc.):

    // Variable
    var text_color = "black";

    // Mixin
    var dim = function( w, h ) {
        return {
            width:  w,
            height: h,
        }
    };

    css // Begin CSS

    ( "div" )( dim( "10px", "10px" ) )
    ({
        color: text_color,
    })

    ( "span" )
    ({
        color: text_color,
    })

    ; // End CSS

And finally, since it's leveraging javascript this technique can modify styles dynamically (My goal):

    item_color_input.onsubmit = function( )
    {
        css // Begin CSS

        ( ".item" )
        ({
            background: item_color_input.value,
        })

        ; // End CSS
    }

Frameworks like jQuery provide similar functionality by acting on the DOM. This can be slow (since it has to execute the selector in javascript) and doesn't affect future elements.

The Code: css.js http://keithmajhor.pastebin.com/twCKCcHV

    // ==============================================
    // File:   css.js
    // Author: Keith Majhor <KeithMajhor@gmail.com>
    // ==============================================
    window.css = function( a )
    {
        var decl = { },
            elem = { },
            rule,
            prop;

        css = function( a )
        {
            if ( typeof( a ) === "string" )
            {
                rule = a;
                if ( !decl[rule] )
                {
                    decl[rule] = { };
                    elem[rule] = document.createElement( "style" );
                    document.head.appendChild( elem[rule] );
                }
            }
            else if ( rule )
            {
                for ( prop in a )
                    decl[rule][prop] = a[prop];

                var temp = rule + "{";
                for ( prop in decl[rule] )
                    temp += prop + ":" + decl[rule][prop] + ";";
                elem[rule].innerHTML = temp + "}";
            }

            return css;
        }

        return css( a );
    }

All it does is maintain a hash for each selector and update a <style> tag whenever it's modified. As is it's 500 bytes, minified it's below 300.

I hope this is useful to someone. If anyone has any insight into why this might be a really stupid thing to do, I'd love to hear it.