News for hackers. Stuff that matters.

A comment on JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS.

Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by mdg on Monday December 21, 2009 @07:05PM (#1008965)
> CSS is not a programming language - no variables, no functions, no logic

How is that an issue and what made you think that it was a programming language?

> CSS properties are not cross-browser compatible

Neither is the DOM. Both statements are misleading because most CSS properties are cross-browser.

> CSS frameworks (haml, sass, less) are meant for server-side templating and we need client-side templating

This is a "disadvantage" of CSS frameworks, not of CSS itself.

> dynamically including .css files in the DOM does not guarantee CSS classes will be set cross-browser

Ok? Are you talking about dynamically including them client or server-side?

This site looks rather bland considering that it is promoting a stylesheet framework. Lets take a look at the stylesheet on this very site:

    <style>
        body {background-color:#000000; color:#FFFFFF; margin:20px;}
        a { color:#FFFFFF;}
        a:hover { color:#CCCCCC;}	
    </style>
I guess this goes hand-in-hand with the grammar, which is also lacking.

Now lets take a look at the sample styling code:

    drip.toolbar.css = {
	  height : "40px", 
	  width : "89px", 
	  position :"fixed", 
	  right : 50, 
	  bottom : 0,
	  overflow : "hidden",
	  cursor : "pointer",
	  color : "#FEFEFE",
	  "background-color": "#932c2c",
	  "text-align" : "left",
	  "font-family" : "Arial, Helvetica, sans-serif",
	  "font-size" : "12px",

	  "#drip-toolbar-button" : {
		height : "30px",
		width : "50px",
		cursor : "pointer",
	  },
	  
	  ".links" : {
		  color : "#FEFEFE"
	  }
This is different / an improvement on CSS how? You are adding extra characters (double quotes and colon) compared to plain-old css for a more bloated stylesheet that must be downloaded? That might be considered nit-picky, but the benefit here of using JSSS is not obvious (Im still trying to figure it out).

Also, the 4 line example is actually 6:

    function parseCSS(id,css){
	  for(style in css){
		if(typeof css[style] == 'object'){parseCSS(style,css[style]);
		else{$(id).css(style,css[style]);}
	  }
	};
Comments have already been made about having javascript disabled. Perhaps a <noscript> tag that would pull down REAL CSS (again, what is the point of this? I am now maintaining CSS and JSSS?) would remedy.
[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by axod on Monday December 21, 2009 @07:09PM (#1008971)
Unless I'm mistaken, the point is that you can modify your styles on the fly as you wish. CSS is pretty static, apart from :hover etc. With js you're free to do what you please.

Personally I prefer to use js rather than css for rich webapps.

[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by JimBastard on Monday December 21, 2009 @07:12PM (#1008980)
i appreciate you took the time to read through everything and respond so throughly, but you seem to be missing the whole point.

you can try re-reading the comments on this thread but if you've never dealt with really rich javascript apps, i can see why this is hard to grasp.

[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by mdg on Monday December 21, 2009 @07:23PM (#1009006)
> i appreciate you took the time to read through everything and respond so throughly, but you seem to be missing the whole point.

You are right, I do not understand why I would want to place CSS inside an object literal instead of just placing the CSS in a CSS file.

>you can try re-reading the comments on this thread but if you've never dealt with really rich javascript apps, i can see why this is hard to grasp.

Ok, I see (not in any order):

1. "Here, something like this already exists, see [link]"

2. "This wont work / This will be slow / What is the point of this"

3. "Server-side preprocessing already works"

4. You refuting anyone who disagrees with you.

[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by axod on Monday December 21, 2009 @07:26PM (#1009013)
"Server-side preprocessing already works" != Rich javascript apps.
[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by mdg on Monday December 21, 2009 @07:54PM (#1009077)
The link makes no mention of RIA. Where were you going with this comment?
[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by axod on Monday December 21, 2009 @08:07PM (#1009107)
Surely you can at least see the need for some easy to use styling in js?

CSS is good for static content. It is pretty useless for dynamic webapps.

[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by JimBastard on Monday December 21, 2009 @07:35PM (#1009034)
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

[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by IgorPartola on Monday December 21, 2009 @07:49PM (#1009058)
1,000,000 CSS classes? What web project possibly uses that many right now? Do you have a real use case in mind? Why not let the browser store and parse the CSS? That's what it is designed to do. And when the browser stores a CSS rule, it can optimise it much more than it can optimise a generic JavaScript literal.

IMHO, this is educational, but useless. CSS already does the job better and by separating your CSS files you could squeeze all the performance you need.

Of course if you can demonstrate how this could possibly be fast on modern browsers on a page with 1,000,000 CSS classes I would be very impressed.

Last: note on terminology. What you are calling JSON is actually just a JavaScript object. Try running it through JSONLint and you'll see that you need to add extra quotes around the "keys", for example.

[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by mdg on Monday December 21, 2009 @07:43PM (#1009045)
A million CSS classes? Is your "rich web app" even usable if it is going to be styled a million different ways? I hope you were exaggerating with that number. Are these real problems you face or are these just examples you make up because you (I assume you are the one who designed JSSS) have a solution looking for a problem?
[ Parent | on HN ]
Re:JSON stylesheets - screw CSS frameworks, use JavaScript -... by JimBastard on Monday December 21, 2009 @07:56PM (#1009086)
i see you are incapable of understanding the word "pretend" or visualizing n-problem scenarios....if you still don't get it...i give up...

and im using this code in production.....and its working out great......its a really simple concept.....

[ Parent | on HN ]