JSON CSS: A More Powerful CSS Proof of Concept

Lab Project

JSON CSS is a proof of concept meant to demonstrate what could be accomplished with a more powerful syntax within CSS. The current implementation uses the power of jQuery and its plugin architecture to do the heavy lifting. The implementation is not really important though – the featureset is what matters.

In short, CSS is great at the basics, but there is a lot of opportunity for improvement by adding a few simple programmatic concepts like variables, inheritance, syntactical cascading, and browser detection. We’re demonstrating that.

To be fair, this is a topic that is hotly contested, but a seeing the benefits in action may be useful.


What is this?

JSON CSS is a proof of concept meant to demonstrate what could be accomplished with a more powerful syntax within CSS.

What does it look like?

A simple JSON CSS stylesheet might look like this:

{
    "@variables": {
        "demoBgColor": "#FBFAF4"
    },
    "#demoContainer": {
        "background-color": "@{demoBgColor}",
        "border": "1px dotted #CCC",
        "padding": "0.5em",
        "width": "40em",
        "@browser[msie-6]": {
            "width": "400px"
        },
        "h3.header": {
            "text-decoration": "underline"
        },
        "div:first": {
            "font-weight": "bold"
        }
    }
}

Why?

Because there’s a lot of potential power that could be harnessed within CSS! Some examples of the benefits that we display with JSON CSS:

  • Crazy awesome selectors – “a[href^=http]” for absolute links! Sweet!
  • Variables support – You’ll never have to look up that weird hex color code for cornflower blue again.
  • In-style browser detection – Just put your IE6 browser-specific styles under an “@browser[msie-6]” rule and you’re set.
  • Syntactical cascading – No need to write “#content .header a”, just put “a” underneath the “.header” class rules.
  • Inheritance – @inherit any previously defined selector into another class. Useful for semantic classnames with underlying un-semantic ones (like from a CSS framework).

Demos

How Do I Use It?

Download the jQuery plugin.

JSON CSS is available for download at Google Code.

Include it and jQuery within your HTML’s <head> element.
Create a sample JSON stylesheet file.

You’ll need a simple JSON CSS file to begin with. Something like this will get you started:

{
    "@variables": {
        "demoBgColor": "#FBFAF4"
    },
    "#demoContainer": {
        "background-color": "@{demoBgColor}",
        "border": "1px dotted #CCC",
        "padding": "0.5em",
        "h3.header": {
            "text-decoration": "underline"
        }
    }
}

This JSON would result in style that looks something like this:

This is the header for the demonstration container.

This is text within the demonstration container.

Take special note of the @variables definition as well as the actual cascading of the header class.

Full documentation will be available on the google code wiki.

Include your JSON stylesheet into your HTML page.

Your <head> element should include something like the following:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="jquery.jsoncss.js"></script>
<script type="text/javascript">
//<![CDATA[
	$(function() {
		$.jscss('style.json');
	});
//]]>
</script>

Download

Click on the icon to go to the download directory then select the latest version:

Download

Documentation

Full documentation will be available on the wiki at Google Code

Licensing

This arc90 tool is licensed under a BSD license.

Discuss

Feel free to offer feedback on the blog, or feature requests/bugs on google code.