CSS-SSC: preprocesador de hojas de estilo

De piedra me he quedado cuando veo que se ma ha pasado algo por alto y me he quedado tan tranquilo. Resulta que mirando otra cosa en el weblog del gran Eric Meyer cuando he visto esto: The Constants Gardener. ¿Y porqué me he quedado blanco? Pues porque he descubierto, o cuando menos he sido consciente de lo que es CSS-SSC. Meyer lo define muy bien:

In other words, you can define your own constants in CSS.

Pero vayamos al concepto, para aclarar de qué estamos hablando. Se trata de una cosa que se llama CSS-SSC, o lo que es lo mismo: Cascading Style Sheets Server-Side Constants. Es decir, hojas de estilo en cascada, y constantes del lado del servidor. Varios conceptos, conocidos todos ellos en el entorno del desarrollo web, pero rara vez vistos juntos con anterioridad. Y creo que es para estar de enhorabuena haberlos visto así, juntitos. Vamos al lío.

La cosa es un invento de Shaun Inman, que es un genio de esto del desarrollo web. Su web es toda una demostración de tecnología, técnica y buenas prácticas. Quizá un poco recargada en los estético para mi gusto, pero bueno, no es lo más interesante de esa web, ni mucho menos. Sigamos, que me pierdo. El bueno de Shaun Inman ha implementado un sistema que mediante un script de php más la combinación de un fichero .htaccess, y tomando prestada la sintaxis de las reglas at que describen los Media types de la especificación CSS2 del W3C, consigue preprocesar la hoja de estilos antes de que se envíe al navegador, y a éste enviarle el código css una vez procesado por el invento. De ese modo se consigue, por ejemplo, poder poner en marcha constantes que arrastren el valor a lo largo de toda la hoja de estilos. Apasionante.

Vamos a resumir y empaquetar conceptos para que vayan quedando claros.

• De qué se trata: CSS-SSC (Cascading Style Sheets Server-Side Constants)
• Necesito: Script de php
• Necesito: unas modificaciones en el fichero .htaccess
  El código a añadir es el siguiente:
RewriteEngine on
RewriteCond %{REQUEST_URI} .css$
RewriteRule ^(.+)$ css-ssc.php?css=%{REQUEST_URI}

• Necesito: conocer la sintaxis de las reglas at que puedo ver en los Media Types de la especificación CSS2 y añadir las reglas correspondientes. Por ejemplo:
@server constants {
constantName: constantValue;
}
selector {
property: constantName;
}
Aunque también se pueden importar las reglas a través de @server url(constants.css);
• Imaginación

Y después de todo eso, se trata de disfrutarlo y estar atento de las novedades que, seguro, irán surgiendo al calor de esta técnica para preprocesar la hoja de estilos.

Este post no es sino una reelaboración de lo que he podido entender de los siguientes artículos de referencia:

• A Quick CSS SSC Update
• CSS Server-side Constants
• CSS-SSV

Más información en el tag de del.icio.us: css-ssc.

En Torresburriel Estudio te ayudamos en el proceso de diseño de servicios digitales mediante tests con usuarios, planteando propuestas de solución en base a los resultados del test. También podemos formar a tu equipo mediante una formación in company, para que apliquen metodologías de diseño centrado en el usuario en el día a día de su trabajo. Contacta con nosotros y cuéntanos tu proyecto.