CSS: Simplificar, complicar, optimizar

Optimizar ¿Quién no quiere optimizar las cosas? Es obvio que siempre es mejor que algo funcione de manera óptima a que funcione de manera mediocre pero en la web, solemos leer demasiados consejos y más allá de las buenas intenciones de quienes los proponen, no todos son aplicables e incluso, algunos son discutibles. Por suerte, como en todo, siempre hay más de una opinión y más de una solución y cuando hablamos de herramientas, no hay ninguna que sea perfecta ni sirva para todo así que usar el sentido común es siempre la mejor opción aunque ya se sabe que ese es el menos común de los sentidos.

Son muchas los sitios que nos hablan de comprimir el CSS e incluso, hay sitios como CleanCSS que ofrecen hacerlo pero esas cosas automáticas hay que utilizarlas con cuidado; con mucho cuidado.

Un artículo de Impressive Webs titula algo así como "Démosle algo de espacio al CSS para que respire" y hace un análisis de estas cosas, mostrando alternativas y opinando qué es lo bueno y qué es lo malo. Es obvio que esas conclusiones son subjetivas (como todas) pero podemos leerlas, pensar y luego decidir.

Hay algo que me parece básico, desde el punto de vista del tiempo de carga, salvo excepciones, comprimir el CSS no es relevante y para quienes recién comienzan puede transformar el código en una maraña inmanejable que asusta e impide avanzar; el resultado, no será otra cosa que un montón de caracteres difíciles de digerir y difíciles de editar:

body{background-color:#343F4A;color:#CCC;font-family:'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;font-size:12px;margin:0;min-width:920px;padding:0;text-align:center}.clear{clear:both;line-height:0;height:0}#navbar-iframe{height:0;visibility:hidden;display:none}a,a:visited,a:link{color:#AAA;outline:none;text-decoration:underline}a:hover{color:#FFF;outline:none}a img{border:none;outline:none;text-decoration:none}object{outline:none}h1,h2,h3,h4,h5,h6{font-family:'Trebuchet Ms', Helvetica, Arial, sans-serif;margin:10px 0}

Cada cuál deberá escoger la forma que le resulte más cómoda para escribir y organizar las cosas. Habrá quien use espacios, quien agregue tabulaciones, quien ordene las propiedades por tipo o alfabéticamente. Todo es aceptable y no hay que limitarse porque la clave es que encontremos lo que buscamos, que podamos editarlo y que funcione.

La estética del código no es relevante en absoluto, lo que interesa es que sea claro para nosotros mismos y evitemos los errores más comunes.

TODAS las propiedades terminan con un punto y coma; es cierto que no es necesario agregar ese caracter en la última propiedad de una regla pero, mejor lo ponemos en todas para acostumbrarnos y evitar problemas.

a { /* esto es un error */
  color: #AAA
  outline: none
  text-decoration:underline
}

a { /* esto está bien aunque la utima no tenga punto y coma */
  color: #AAA;
  outline: none;
  text-decoration: underline
}

a { /* esto está bien */
  color: #AAA;
  outline: none;
  text-decoration: underline;
}

Cuando una propiedad está formada por varias palabras, debe haber un carácter espacio entre ellos pero, no es necesario un espacio entre el caracter dos puntos y la primera palabra:

div { /* esto es un error porque entre el cierre del paréntesis y la palabra no-repeat falta un espacio */
  background: #AAA url()no-repeat left top;
}

div { /* esto está bien aunque no haya espacio entre los dos puntos y el color */
  background:#AAA url() no-repeat left top;
}

div { /* esto está bien */
  background: #AAA url() no-repeat left top;
}

Dentro de una etiqueta <style> JAMÁS se agregan otras etiquetas, sólo se agregan reglas de estilo con sus propiedades. Lo mismo ocurre con la etiqueta <b:skin> de Blogger. El JAMÁS también incluye los comentarios:

div { /* esto es un error  */
  <!-- comentario comentario comentario >
  background: #AAA url()no-repeat left top;
}

div { /* esto está bien */
  /* comentario comentario comentario */
  background:#AAA url() no-repeat left top;
}

En estos dias, el CSS es fundamental, mucho más cuando se trata de páginas dinámicas como un blog ya que es lo que nos permite simplificar la forma en que escribimos entradas. Los editores, nos dan herramientas para eso y esas herramientas son útiles pero a la vez son engañosas así que hay que utilizarlas con prudencia. Es cierto que podemos formatear nuestros textos con un simple click y listo; ponemos el color de los párrafos, el tipo de fuente; todo genial pero ... ¿y si mañana cambiamos de idea?

Son muchos los que cambian las plantillas con frecuencia; es parte de la diversión, parte del juego y, cuando lo hacen, suelen encontarrse con un problema: las entradas se ven mal; ese color no es el color que uno quiere, esa fuente no es la que uno usaría en este nuevo diseño y tal vez preguntan ¿cómo hago? Pués, lamentantablemente, si los estilos han sido agregados en las entradas no queda otro remedio que editarlas una por una.

Es que, el CSS es justamente para evitar eso y lo estamos utilizando mal; lo que debemos hacer, siempre que sea posible, es establecer reglas generales; el color, las fuentes, todo eso que vamos a utilizar habitualmente y colocar esas reglas y propiedades por defecto junto con las otras. Si no queremos que los enlaces se subrayen establecemos la regla para todo el sitio y eventualmente, cuando queremos que alguno de ellos se subraye, lo indicamos expresamente; ese tipo de detalles hará que no debamos estar repitiendo estilos en cada etiqueta.

Agregar estilos inline, es decir, con un atributo style dentro de la etiqueta, debe ser siempre el último recurso, nunca el primero.