JSON stylesheets - screw CSS frameworks, use JavaScript

Re: JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS

#31

Post by _3ex7 » Tue, Dec 22, 2009, 12:43 AM UTC

JimBastard wrote: post #29

_3ex7 wrote: post #25

Earlier quoted context omitted.

> 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,…

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 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 tag isn't cross-browser...so you try to parse the .css file in JS.....…

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?

Re: JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS

#32

Post by IgorPartola » Tue, Dec 22, 2009, 12:49 AM UTC

JimBastard wrote: post #29

_3ex7 wrote: post #25

Earlier quoted context omitted.

> 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,…

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 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 tag isn't cross-browser...so you try to parse the .css file in JS.....…

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.

Re: JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS

#33

Post by _3ex7 » Tue, Dec 22, 2009, 12:54 AM UTC

axod wrote: post #27

_3ex7 wrote: post #25

Earlier quoted context omitted.

> 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,…

"Server-side preprocessing already works" != Rich javascript apps.

The link makes no mention of RIA. Where were you going with this comment?

Re: JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS

#34

Post by JimBastard » Tue, Dec 22, 2009, 12:56 AM UTC

_3ex7 wrote: post #31

JimBastard wrote: post #29

Earlier quoted context omitted.

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 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 tag isn't cross-browser...so you try to parse the .css file in JS.....…

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?

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.....

Re: JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS

#35

Post by axod » Tue, Dec 22, 2009, 1:07 AM UTC

_3ex7 wrote: post #33

axod wrote: post #27

Earlier quoted context omitted.

"Server-side preprocessing already works" != Rich javascript apps.

The link makes no mention of RIA. Where were you going with this comment?

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.

Re: JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS

#36

Post by woid » Tue, Dec 22, 2009, 9:04 AM UTC

axod wrote: post #16

woid wrote: post #9

Earlier quoted context omitted.

one big drawback I'm seeing is binding styles directly to DOM elements (it will appear as style attribute). this definitely has memory (many non-shared styles) and performance implications (may cause many reflows because you are setting styles individually) and it may interfere with existing code I would expect this tool to generate real CSS stylesheet code and embed it into page dynamically

I don't think this is an issue. You're modifying the DOM directly. Those style properties exist anyway. You're just modifying them via js. It only "appears as style attribute" if you serialize the DOM into HTML.

Have you ever looked at any open-source browser implementation?

Because of cascading nature of style definition. Data structures describing current styling form trees (for memory efficiency and easy manipulation from script). Effective styles are evaluated during rendering.

For example look at this talk and around 11:30 the guy is describing style-related data structure in Chrome/WebKit: http://www.youtube.com/watch?v=RVnARGhhs9w

Your statement "Those style properties exist anyway" is simply not true.