Una de mis preferencias personales a la hora de trabajar, es un código CSS indentado y escrito de la forma más estricta posible. Nunca debo dejar un espacio al azar, ni una indentación escrita sin sentido. Es una buena práctica que adquirí durante mi estancia en mi primera empresa grande, donde el código CSS no contiene ni un solo espacio doble, ni una sola indentación con espacios. Siempre, se usa el tabulado para indentar.

Editando CSS en Espresso

En la práctica, consiste en el siguiente concepto:

/* @group GROUP NAME */
selector { atribute:value; }
/* @end */

Siempre, se agrupan los selectores según su ubicación. A continuación, se inserta el selector, seguido de un espacio, llave ({), espacio, atributo, doble punto (:), valor, punto y coma (;), espacio y cierre de llave (}). Se inserta un salto de línea y se continúa. Ni un espacio más.

Por último, las propiedades del selector, tampoco se insertan al azar. Se van escribiendo con el siguiente orden: propiedades de posición (display
, top, left, position, etc.), propiedades de tamaño (margin, padding, height, width, etc.) y propiedades de diseño (background, border, line-height, text-decoration, etc.). Además, el contenido de estos 3 grupos se mostrará en orden alfabético. Por ejemplo:

/* @group SAMPLE */
.sample_selector { left:15px; top:1em; position:absolute; margin:0; overflow:hidden; padding:0; background:transparent; border:0; box-shadow:1px 1px 1px black; font-size:100%; text-decoration:none; }
/* @end */

Este sistema es, para mí, algo muy parecido al orden absoluto a la hora de trabajar. Tiene múltiples ventajas:

  1. Menos saltos de línea, más contenido a golpe de vista.
  2. Mejor localización del contenido en el código.
  3. Evita duplicar propiedades (al escribir largas líneas sin orden concreto, se suelen repetir propiedades por error).
  4. Más fácil de mantener.

Además de otras muchas ventajas, estas son las principales. Es difícil encontrar páginas o desarrolladores que tengan establecido un sistema de presentación del código, y tampoco existen recomendaciones concretas por parte de entidades como el W3.

Posted by Hans Christian

freelance especialista en para blogs y proyectos de contenidos.

Deja un comentario