Como puedes usarlos para ahorrar líneas de código
CSS simple:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}
CSS con atajos:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font: normal 14px/18px Arial, Helvetica, SanSerif;
}
Al crear una hoja de estilos para alguno de nuestros proyectos generalmente escribes el código lo más rápido posible, esto trae en ocasiones un resultado de una hoja muy extensa y desordenada.
Si acostumbras usar editores de código con intellisense tienes la gran ventaja de que el programa te muestra las opciones de cada atributo mientras escribes pero eso no hace mas que agravar el problema.
Conforme tu desarrollo lo requiera la hoja de estilo va creciendo y puedes necesitar echar mano de una buena organización y los atajos CSS para no elevar el tamaño de la misma.
Una buena organización te puede ayudar para que una declaración bien estructurada te permita crear el código más compacto y evitar la redundancia, veamos unos cuantos ejemplos al respecto.
Esta es una declaración típica al inicio de una hoja de estilos:
body{
margin:0;
padding:0;
}
Si tu declaración va a ser similar para otras etiquetas o clases, una manera de limitar el número de líneas de la declaración puedes ser hacer algo como esto:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
}
Y en el ejemplo ahorrarás tantas líneas de código como nombres de etiquetas o clases separes con comas.
Siempre tendrás casos especiales en los que una o varias etiquetas requieren declaraciones diferentes y no las puedes juntar en un solo grupo, en ese caso tu creatividad te servirá para hacer una escritura mas ligera, por ejemplo:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}
Si únicamente las etiquetas span y div requieren un tamaño de letra mas pequeño, una solución podría ser eliminarlas del bloque inicial y copiar todo el bloque nuevamente para las dos etiquetas cambiando únicamente el tamaño de fuente, así:
body, p, h1, li, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}
span, div{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:12px;
font-style:normal;
line-height:18px;
}
Otra solución sería tratarlo de esta manera:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-style:normal;
line-height:18px;
}
body, p, h1, li, .claseX, .claseY, .claseZ{
font-size:14px;
}
span, div{
font-size:12px;
}
Sin embargo si aplicas el criterio de cascada, puedes generar el código de esta manera ahorrando un par de líneas en el proceso:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}
span, div{
font-size:12px;
}
Las etiquetas span y div están duplicadas pues hay 2 declaraciones para ellas pero como sabes, en CSS la última declaración es la que cuenta.
Hasta aquí nada especial solo el buen criterio de agrupación y orden para armar un código mas corto.
Pero y este es el punto importante de este post, existen en el lenguaje de hojas de estilo, los llamados “atajos CSS” (shortcuts) que permiten usar técnicas de escritura corta para algunas declaraciones en particular, veamos una comparación del uso de CSS con y sin shortcuts.
CSS simple:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font-family:Arial, Helvetica, SanSerif;
font-size:14px;
font-style:normal;
line-height:18px;
}
CSS con shortcuts:
body, p, h1, li, span, div, .claseX, .claseY, .claseZ{
margin:0;
padding:0;
font: normal 14px/18px Arial, Helvetica, SanSerif;
}
La técnica muestra claramente un código más ligero y coherente,
En la siguiente entrega podrás conocer las declaraciones que aceptan shortcuts y cómo usarlos en cada caso particular.
[...] Atajos CSS [...]