aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Una interesante idea me encuentro por delicious esta mañana. Se trata de JSSS, una implementacion (muy sencilla) para conseguir JSON que genere CSS. La idea es solucionar algunas de las carencias de CSS:

• CSS no es un lenguaje de programación (no hay variables, funciones, no lógica)
• Las propiedades CSS no son cross-browser
• Los frameworks CSS están pensado para trabajar en lado del servidor y necesitamos que se ejecute en el cliente
• Incluir dinámicamente CSS en el DOM no garantiza que las clases CSS sean cross-browser

Por ese motivo, las hojas de estilo JSON pretenden aportar las ventajas de Javascript:

• Todas las propiedades CSS están almacenadas en objetos JSON
• Las propiedades y clases CSS pueden ser manipuladas via Javascript
• Las propiedades y clases pueden ser dinámicas en tiempo de ejecución
• Todo el sistema de plantillas CSS es gestionado desde el cliente

Código (jQuery)

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

Ejemplo de uso

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"
  }

};
// Parseamos JSSS
parseCSS('#drip-toolbar', drip.toolbar.css);

Opinión

La idea es interesante, y lleva más de 10 años dando vueltas por Internet, es cierto que se permite un mayor control del CSS en el lado del cliente, pero depende completamente de que este tenga javascript o lo esté ejecutando en este momento.