

JSON stylesheets - screw CSS frameworks, use JavaScript - JSSS - JimBastard
http://maraksquires.com/json_stylesheets/

======
tptacek
(1) CSS frameworks work whether or not client disable Javascript.

(2) Many of the problems this article's thesis lays out with CSS are solveable
server-side, by preprocessing CSS.

~~~
SamAtt
"CSS frameworks work whether or not client disable Javascript."

I've been thinking about this a lot lately and I'm not sure it's that big a
concern anymore.

I did a test one day and tried to get through a day with Javascript disabled
and I came to the conclusion the web simply isn't usable that way. Because
these days even the simple sites require Javascript because tools like
dreamweaver embed javascript for menus and other basic animations.

~~~
tptacek
Until very recently, you were either all-in with Flash or you couldn't watch
most video online. Now there's ClickToFlash. Similar things are happening with
JS. Either way, it's a disadvantage of doing styles in pure JS.

~~~
axod
And it's a disadvantage to using CSS if the user has disabled CSS :/ I'm not
sure why that argument is relevant. Fact is, 99%+ will have CSS and JS
enabled.

~~~
mdg
Sites still function without CSS. The same cant be said for poorly coded sites
and javascript. I do agree this is mostly a non-issue though.

------
IgorPartola
This will be SLOW. Also not having vars in CSS is a blessing in disguise:
otherwise business logic would be built into the stylesheet by some genius and
I would Auvergne to support it. No thanks.

~~~
JimBastard
1\. jQuery and sizzle are pretty fucking fast

2\. if you cant separate your business logic from your views....you have
bigger problems to deal with....

~~~
IgorPartola
1\. Not as fast as C++

2\. Exactly. And this simply invites someone to put in the stylesheet.

3\. Debugging CSS is already not trivial due to implementation issues. As this
technique still relies on CSS you will still have some of the same issues.

4\. Ability to have expressions in the stylesheets has already been tried.
Once. Trust me you don't want it. Testing and debugging it is very hard.

~~~
JimBastard
lolwut?

i'll agree with you that c++ is faster then jQuery....good day

------
lanstein
see also <http://www.featureblend.com/css-json.html>

~~~
ftrBlndWasFirst
isn't this the same stuff just 2 years later? why are we talking about this?

------
docyes
See also <http://www.cssugar.com/>

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

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

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

~~~
JimBastard
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

~~~
mdg
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?

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

