How would you load that CSS file dynamically into your DOM?
pretend you had 1,000,000 CSS classes that could be used in your one-page JavaScript application. you cannot load all of these with <link> on page load.......too much data.....you'd have to start dynamically loading .css files using AJAX requests......and you realize that dynamically inserting a <link> tag isn't cross-browser...so you try to parse the .css file in JS.....but then you realize that you have no way of natively parsing a .css file in JavaScript.....so you find / build a .css parser.....which is slow as balls.......then you want to start manipulating these classes and have no place to access them......so you have to store them in memory somewhere....might as well use nested JSON!
pretend you didnt know what your CSS classes were going to be until run-time.....like creating dynamic DOM views based on user input.....you would have to store your CSS properties in memory regardless....might as well use nested JSON!
pretend you had an entire javascript application stack and several tools for managing JSON documents on the server and the client.....
if i'm refuting people who disagree with me....this is not my fault. i am simply responding to peoples comments and questions. i'm always open to insightful suggestions and recommendations.....
edit: also i'd like mention your comment about line numbers is kinda silly.....i could just make it one line.....its JavaScript.
i said 4 lines since it was : function declaration, for loop, if conditional one liner, else conditional one liner.......
if you are really that upset about the line number count please let me know the correct amount of line numbers and i'll be sure to update my page