CSS: escribe una hoja que sea fácil de leer


Un fichero de CSS puede tener cientos de líneas y depende como lo escribas puede ser fácil o muy difícil de leer.

Espacios en blanco, tabuladores y saltos de línea ayudan a que el código se visualice más claramente. Algunas personas prefieren escribir todo el código en una sola línea y esto dificulta la lectura y la revisión del código aplicado. Otras personas prefieren escribir una propiedad por línea, y otros prefieren que las propiedades aparezcan con sangría (con dos o cuatro espacios o con tabulación). Otras variantes las encontramos con la posición de las llaves de apertura (algunos casos situándolas detrás del selector, en otros en una línea nueva). También otro estilo de ordenamiento del código es alinear todo verticalmente, aunque según expertos en la materia este estilo es difícil de mantener.
Otro mecanismo que facilita la lectura de un CSS son los comentarios.
Estos empiezan con /* y finalizan con */. Los comentarios ayudan a definir partes en un CSS, por ej.:

/* ...colores...*/
/*...bloques y capítulos...*/
Otra variante que se puede utilizar para que un CSS sea más fácil de leer es utilizar la agrupación de selectores, es decir que cuando varios elementos tienen el mismo estilo se pueden agrupar separándolos con comas en una única regla:
h1  {
     color: red;
}
h2  {
     color: red;
}
h3  {
     color: red;
}
Agrupando las reglas en una sola;
h1,  h2,  h3  {
     color red;
}
La agrupación de reglas no impide que se puedan definir reglas individuales para cada uno de los elementos:
Regla común:
h1,  h2,  h3  {
     color red;
}
Aplicación de reglas individuales para cada uno de los elementos:
h1  {
     font-size:  5 em;
}
h2  {
     font-size:  3 em;
}
h3  {
     font-size:  1.5 em;
}  
 Fuente: Activate, Google España
librosweb.es

Comentarios

Entradas populares de este blog

Códigos Hex de color

Enlaces Intradocumentales

Etiqueta header HTML5