Easy storage of css properties using Javascript

For some time I've been looking at how to parse and store a raw css file in javascript, asking questions like should I use an xml document or nested arrays or some long list of nested custom objects? These three techniques are all valid but none ideal.

Well, tonight I had the idea, which I'll share with the world now. The simplicity and easy of implementation makes it look like a worthy place to invest some time and energy.

Take the following example css snippet:

#nav {
font-size: 12px;
color: #f00;
border: 1px solid #000;
margin: 4px;
}


Well, which storage method is the best candidate for the complexity of nested css rules and statements?

JSON. (JavaScript Object Notation)

We can easily describe the above css snippet using Javascript:

var csstest = {"#nav": {"font-size":"12px;", "color":"#f00;","border":"1px solid #000;","margin":"4px;"}};

alert(csstest["#nav"]["font-size"]);

In fact, its spooky how similiar CSS and JSON are considering the fact they're used for completely different purposes. Apart from the obvious need for ("...") quotes the format looks very compact, ideal for other processing inside JavaScript itself.

Have fun with parsing css and JSON.

Enjoy.