Sabios consejos para optimizar una hoja de estilo

Por último, y antes de entrar en las cuestiones de validación y accesibilidad, me gustaría dar una serie de consejos para optimizar un documento CSS; son una serie de prácticas que suelo aplicar, y que me sirven para mantener mis hojas de estilo lo más compactas posibles:

• Aplicar los aspectos más generales de un estilo a los elementos situados más altos en el esquema de herencia de las declaraciones. Es decir, que si por ejemplo decidimos que las columnas de un diseño necesitan una fuente Trebuchet MS con un cuerpo de 0.7 ems, color negro, y fondo blanco, es más práctico aplicar tal regla al elemento body que duplicar las reglas para cada una de las columnas.

• Agrupar selectores cuando coincidan sus declaraciones. Así, si por ejemplo tenemos:

  
      #herramientas{
          color:#009;
          background:#E1E1E1;
          font-size:90%;
          text-align:center;
      }
      
      #pie{
          color:#009;
          background:#CCC;
          font-size:90%;
          text-align:center;
      }
                      

  se ahorran líneas de código de esta manera:

  
      #herramientas,#pie{
          color:#009;
          background:#E1E1E1;
          font-size:90%;
          text-align:center;
      }
      
      #pie{
          background:#CCC;
      }
                      

• Emplear la sintaxis abreviada de las propiedades siempre que sea posible. Esto se aplica a las propiedades indicadas como de conjunto en las secciones dedicadas a las propiedades de CSS.
• Emplear de la manera más restrictiva posible class, en favor de id y de los selectores avanzados, como ya he explicado en la sección anterior.

• No especificar los valores por defecto de una propiedad, salvo cuando se pretenda restituir este valor frente a otro heredado. A lo que me refiero es que una declaración inicial como ésta:

  
      h1{
          color:inherit;
          background:inherit;
          display:block;
          text-align:left;
          width:auto;
          height:auto;
      }
                          

  es totalmente innecesaria, puesto que esos son los valores que ya por defecto se van a aplicar para un encabezado. Sé que parece obvio, pero es sorprendente la cantidad de hojas de estilo con las que uno tropieza en las que se ven reglas similares…