Don't mind me… just here to take over the world…

JSON-style Cascading Style Sheets

So, it’s kind of the way of the world that when I have a good idea and start focusing my energies on fully hashing out and refining that idea, I find that somebody else has shared that idea and is already (sometimes only somewhat) implementing it. Today’s example is what I might call JSON-style CSS.

After looking at much of my CSS code and going, “Man, this would be simpler if I didn’t have to duplicate some of these selectors.” To see what I mean, check out the following code (and yes, I am a fan of the single-line CSS rule):

I wrote this stuff in the main CSS file of a fairly large hand-written project. The project had a number of controllers, and for some of those, I wanted to tweak just a few things about the presentation. I had a few options to resolve this problem:

I quite possibly could rely on just the class names (gateway, subnet-mask, etc.) to handle these, but there are a few other controllers with similar elements that I did NOT want styled this way.

I could create a totally separate CSS file that was included only when the controller I wanted to target was the one being called. I actually started off this way, but determined I’d be much better off performance-wise going with the solution I chose.

What I would like to do is somewhat more of a JSON-style CSS sheet. If you look at CSS, it kind of resembles JSON already…. Kind of. I think a better solution to my problem would have been if I could do something like this:

I do think even this could be simplified (maybe put all the identically-classed labels on one line or something), but I think this is much easier to read. It also eliminates 18 calls to the #cfgfile-controller selector. That’s a savings of 345 characters (970 – 625). Apply this concept to an entire style sheet and you can come up with some pretty cool stuff.

As I mentioned in the beginning, sometimes when hashing out these ideas, I find they’ve already been thought up. For more info, check out LESS. It uses the exact notation I’m describing, but requires compiling into standard CSS. I think CSS should handle this type of notation on its own… CSS4 anyone?