Sabemos que existen muchas implementaciones que nos ayudan a tener variables en CSS pero desgraciadamente no son implementaciones estándar ni soportadas por el W3C; pero hasta hace poco se dío a conocer de manera oficial el primer borrador de trabajo llamado Working draft.
El correo enviado por Tab Atkins Jr. a la lista de Style del W3C da a conocer de manera oficial el primer borrador de trabajo de este nuevo proyecto, Variables en CSS.
Según Tab en el E-mail
Tab dice que las grandes y pequeñas aplicaciones suelen tener cientos de líneas de CSS, y que generalmente muchos de estos valores se encuentran repetidos a lo largo de la hoja de estilo, debido a que solemos usar un esquema de 3-4 colores por sitio. La modificación de estos valores suele ser costoso y sujeto a errores. Buscar y reemplazar no suele ser una opción viable.
Con este nuevo módulo se busca introducir a las hojas de estilo (CSS) los valores que asignamos a una propiedad y posteriormente asignar ésta a cualquier elemento dentro del documento.
Ejemplo:
@color1: #ccc;
@color2: #efe;
body{
background-color:@color1;
color:@color2;
}
De esta manera podríamos tener las variables definidas en la parte superior y asignarlas a lo largo del documento, si queremos cambiar la variable color1, sólo tendríamos que hacerlo en la definición de variables propagándose, mientras que la lectura del documento es más fácil de hacer.
Muchos sistemas de variables han servido de inspiración para este módulo, incluyendo SASS y una especificación previa realizada por Dave Hyatt y Daniel Glazman en disruptive-innovations.com/zoo/cssvariables. Este enfoque presentado tiene muchos beneficios, más allá del simple mantenimiento de las hojas de estilo; sin embargo la especificación aún está en los primeros pasos.
La idea con ésta primera versión es que sea lo más simple posible, puesto que no es tan fácil como parece, tiene su propia complejidad y quizas sea posible que veamos esto en la próxima versión de CSS, o sea CSS4.
Mmm… Te digo la verdad… No tan indispensable… sobre todo para la gente organizada como yo que suelo separar comentando en las diferentes partes de un documento CSS y aprovecho a decir que para ganar espacio y no enquilombarse tanto esta bueno definir cada estilo seguido y no saltando a linéas constantemente, y usando shorthand:
.un_estilo { width: 1000px; height: 500px; margin: 0 auto; background: #111111 url('../images/B-head.png'); }
Ah y me olvidaba… Usando @color1 por ejemplo… mirá si quiero cambiar el background de un solo div que previamente compartía esa propiedad con otros estilos… Tendría que modificar a los otros porque tendrían el mismo color que éste o crear un nuevo @color para ese div en concreto y es… al dope hacerlo.
El tema de las variables en CSS Vennenno se esta tratando con el proposito de aumentar las capacidades de este, tal como se esta viendo con CSS3 y las ventajas que tenemos con los selectores, imagina que ahora podemos compartir valores entre propiedades ahorrando KBs de datos en nuestros archivos, combina esto con las buenas practicas en CSS y tendras mas rendimiento.
A mi me parece genial que sigan implementado más características a CSS 🙂 cada vez los diseñadores tendrán que codear más :trollface:
Y creo que es bueno que los diseñadores codeen, porque aumenta la eficacia del proyecto en grupo que estén trabajando.
Además creo que el que los diseñadores sepan codear (HTML y CSS) es una característica que distingue a los buenos diseñadores.