CSS JSON

Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. JSON (JavaScript Object Notation) is a lightweight data-interchange format. CSS may easily be expressed in JSON notation (CSS JSON). CSS JSON is a powerful and flexible approach allowing for inheritance and logical constructs within CSS.

CSS JSON Structure

    {
        "selector-1":{
            "property-1":"value-1",
            "property-n":"value-n"
        }
    }

Converting CSS JSON to CSS Text with JavaScript

    var cssjson = {
        "selector-1":{
            "property-1":"value-1",
            "property-n":"value-n"
        }
    }

    var styleStr = "";
    for(var i in cssjson){
        styleStr += i + " {\n"
        for(var j in cssjson[i]){
            styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"     
        }
        styleStr += "}\n"  
    }

The above example returns the following CSS text format:

    selector-1 {
       property-1:value-1;
       property-n:value-n;
    }

Extending CSS with CSS JSON

Custom selector property/values can be used in CSS JSON as a mechanism to extend CSS. CSS text pre-processing is possible through the mapping of a specfied property to a conditionally executed parsing routine.

CSS Selector Inheritance with CSS JSON and JavaScript

A CSS selector may be inherited within another selector using CSS JSON.

    var cssjson = {
            ".copy-1":{
                "font-family":"Verdana, Geneva, Arial, Helvetica, sans-serif",        
                "font-size":"11px",
                "color":"#CCC"
            },
            "div#container div#header":{
                "CSSJSON-INHERIT-SELECTOR":".copy-1",
                "position":"absolute",
                "top":"12px",
                "left":"4px"
            }
    }
    var styleStr = "";
    for(var i in cssjson){
        styleStr += i + " {\n"
        for(var j in cssjson[i]){
            if(j=="CSSJSON-INHERIT-SELECTOR"){
                for(var k in cssjson[cssjson[i][j]]){
                    styleStr += "\t" + k + ":" + cssjson[cssjson[i][j]][k] + ";\n"
                }
            }else{
                styleStr += "\t" + j + ":" + cssjson[i][j] + ";\n"     
            }
        }
        styleStr += "}\n"  
    }

The above example returns the following CSS text format:

    .copy-1 {
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;        
        font-size:11px;
        color:#CCC;
    }
    div#container div#header {
        font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;        
        font-size:11px;
        color:#CCC;
        position:absolute;
        top:12px;
        left:4px;
    }

CSS JSON Using Other Processing Languages

• Perl - http://naoya.g.hatena.ne.jp

CSS JSON Implementations

• CSSugar - Syntactic sugar for CSS
• SAPO Javascript Library; SAPO::Utility.CSS class
• Wiklets - dynamically embedded pieces of wiki content

Alternative CSS Data Serialization Formats

• Sass - Syntactically Awesome Stylesheets
• LESS - Leaner CSS
• CSS YAML

Contact Questions

Please feel free to forward any questions, comments or implementations of CSS JSON to http://groups.yahoo.com/group/cssjson