JSON stylesheets - JSSS

problems with CSS

• CSS is not a programming language - no variables, no functions, no logic
• CSS properties are not cross-browser compatible
• CSS frameworks (haml, sass, less) are meant for server-side templating and we need client-side templating
• dynamically including .css files in the DOM does not guarantee CSS classes will be set cross-browser

advantages of JSON stylesheets

• all CSS properties are stored in nested JSON objects
• CSS properties and classes can be manipulated via JavaScript
• CSS properties and classes can be dynamically set at run-time using a selector engine like jQuery
• all styling and templating can be managed client-side

4 line example JSSS parser using jQuery

	function parseCSS(id,css){
	  for(style in css){
		if(typeof css[style] == 'object'){parseCSS(style,css[style]);
		else{$(id).css(style,css[style]);}
	  }
	};
	

usage

	
	var drip = {};	
	drip.toolbar = {};
	
	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"
	  }
	  
	};
		
	parseCSS('#drip-toolbar', drip.toolbar.css);