Es seguro que en algún momento todos los que trabajamos con CSS echamos en falta las conocidas variables, elementos esenciales en cualquier lenguaje de programación. Para solventarlo se me ocurren varias formas:
- Evitar las redundancias.
- Usar mejor la descendencia en los selectores.
- Definir las variables como meros comentarios.
- Usar variables de PHP u otro lenguaje dinámico de servidor.
- Decantarnos por CSS 3.
Es probable que existan más formas ¿conoces alguna?, bueno… de momento voy a intentar explicar las mencionadas.
Evitar las redundancias
Ejemplo redundante
h1 {
color: #59B0E5;
font-size: 1em;
text-decoration: underline;
}
h2 {
color: #59B0E5;
font-size: 1.2em;
text-decoration: underline;
}
Evitamos redundancias
h1 { font-size: 1em; }
h2 { font-size: 1.2em; }
h1, h2 {
color: #59B0E5;
text-decoration: underline;
}
El ejemplo es obvio y carece de explicaciones, sin embargo en hojas de estilo complejas la tarea de sintetizar es más complicada.
Usar una mejor la descendencia en los selectores
p em, p strong, p dfn { color: #59B0E5; }
Definir las variables como meros comentarios
En la cabecera del fichero CSS podemos incluir bajo la notación de comentarios las «variables» que entran en juego en la hoja de estilo.
/*
Primary color: #59B0E5
Second color: #DA5BA4
*/
p { color: #59B0E5; }
...
Así y con ayuda de la típica herramienta «buscar/reemplazar» podemos cambiar fácilmente los valores en todo el documento.
Usar variables de PHP u otro lenguaje dinámico de servidor
Para ello debemos tener en cuenta varias cuestiones.
Extensión .PHP
La primera de ellas es que el fichero sea interpretado como tal, en el caso de PHP podremos llamar a la hoja de estilos style.php.
Enlace al fichero
<link rel="stylesheet" type="text/css" href='/css/style.php' />
Tipo de contenido
Debemos indicar al servidor web el tipo de contenido de nuestro fichero para que sea correctamente interpretado. Esto lo podemos hacer fácilmente en PHP enviando la cabecera con el tipo MIME.
header("Content-type: text/css;");
Declarando las variables
$colorweb1 = "#59B0E5"; $colorweb2 = "#DA5BA4";
Usando las variables
En las propias reglas CSS podemos incrustar las llamadas a las variables de PHP.
h1 { color: ; }
h2 { color: ; }
Decantarnos por CSS 3
Las anteriores soluciones son como «de andar por casa». CSS 3 nos brinda la posibilidad de usar variables reales de forma «nativa». El problema es la retrocompatibilidad con algunos navegadores actuales y todas las antiguas versiones 🙁
Declarando las variables
@variables { colorweb1: #59B0E5; colorweb2: #DA5BA4; }
Usando las variables
h1 { color: var(colorweb1); }
h2 { color: var(colorweb2); }
