Ordenando nuestro código CSS

Cada desarrollador tiene su propia manera de formatear o estructurar el código que escribe, pero cuando se trabaja en equipo, una forma estándar de formatear o estructurar el código es el mejor interés de todos.

En todo el tiempo que tengo escribiendo CSS, he ido experimentando con diferentes formas de estructurar mi código, formas de organizarlo para que sea más sencillo de identificar, no solo por mi, sino por las personas que trabajan conmigo.

Ahora complemento mis experiencias con opiniones de otras personas con el fin de encontrar la manera más funcional de organizar las hojas de estilo CSS. Claro está que cada persona puede optar por usar una manera particular de organización, pero de todas maneras es válido conocer algunos consejos que pueden orientar a los que no han conseguido este objetivo.

Uno de los trucos que aprendí ultimamente a raiz de jugar un poco con el css, es el de utilizar una grilla o rejilla en el fondo de la página durante el tiempo de desarrollo, esto me permite ubicar los elementos con mayor facilidad.

Navegando por The third degree encontré un método para organizar y manejar fácilmente nuestras hojas de estilo y el cual presento a continuación.

Estructura de Archivos
Este método consiste en separar el estilo en más de un 3 archivos CSS. De esta manera se separa los estilos por defecto de los estructurales y los de formato:

default.css Conteniendo los elementos comunes, como el reseteo de los valores por defecto. Por ejemplo asignar borde «0» a las imágenes entre otros.
layout.css Conteniendo los elementos estructurales básicos del sitio.
presentation.css Conteniendo los elementos de presentación, como fondos, tipografías y tamaños de los mismos.

A veces puede ser necesario estructurar una hoja de estilos adicional para Internet Explorer la cual se puede invocar con una pequeña condicional:

 <!--[if IE]> 

<link href="/css/ie.css" rel="stylesheet" type="text/css" media="all" /> 

<![endif]--> 

En el caso de un site más grande se puede requerir diferentes estilos para las diferentes secciones por ejemplo:

• defaults.css
• layout.css
• presentation.css
• shopping.css – para cualquier página de explorar/buscar (incluida la condicional)
• myaccount.css – para la sección mi cuenta (incluida la condicional)
• checkout.css – para el proceso de compra (incluida la condicional)
• ie.css

Estructura de selectores
Para cada archivo de css que se escriba se debe mantener una estructura organizada para los selectores. Es decir, para los elementos (h1, h2, h3), id (#foo, #bar) o clase (.foo, .bar) usadas en cada archivo.

Para el archivo defaults.css, lo usual es mantenerlo simple. No es un archivo muy largo entonces se puede empezar con «body» y continuar jerárquicamente con el resto de elementos, al final se colocarán las clases acondicionadas/personales.

El archivo Layout.css sigue la misma estructura de la plantilla HTML, empezando por body luego el elemento de afuera desde el header hasta el footer. Por ejemplo, si tengo 3 <div>s contenedores , llamados header, content, y footer mi CSS debería verse así:

body { 

     margin:0; 

     padding:10px 0; 

} 

#header { 

     display:block; 

     margin:0 auto; 

     padding:4px 10px; 

     width:740px; 

} 

#content { 

     display:block; 

     margin:0 auto: 

     padding:10px; 

     width:740px; 

} 

#footer { 

     display:block; 

     margin:0 auto; 

     padding:10px; 

     width:740px; 

}

Con el archivo presentation.css, se puede tomar un comportamiento un tanto diferente. Se puede estructurar los selectores en base a cierto criterio diferente al orden del HTML, porque muchos estilos pueden ser usados en varias ocasiones a través de la página. Para cada site se crea una estructura diferente, pero la mayor parte de los elementos son agrupados juntos basados en su relevancia para cada una de las otras página HTML. Aquí hay un ejemplo de los selectores que se agrupan generalmente y de su orden:

• Estilo de los elementos estructurales (body, #header, #content, #footer)
• Estilo de los elementos HTML y texto (h1, h2, p, a, blockquote, etc.)
• Estilos de navegación
• Estilos de Plantilla para las diferentes página(home o páginas de contenido)
• Estilos independientes de Plantilla (clases específicas aplicadas a todas las Plantillas)

Estructura Propiedad/Valor
El orden en el que construyas las propiedad/valor no tiene mucha importancia para la mayoría de desarrolladores, pero puede mejorar bastante el trabajo en equipo.
A continuación hay un ejemplo:

Fuente: Formatting CSS: File Structures to Property/Value Pairs

Este ultimo item del tema fue objeto de una búsqueda/consulta y posterior entrada en Icebeat donde se llegaba más o menos a la misma conclusión sobre el orden de los propiedad/valor en los archivos CSS:
Comportamiento

• display
• overflow
• clear

Posición

• position
• float
• top

Tamaño

• height
• width

Margenes y bordes

• margin
• border
• padding

Texto

• font
• text
• line-height

Fondos y colores

• background
• color

Fuente: Orden de propiedades en CSS II

Sobre el orden de los selectores dentro del archivo CSS hay quienes prefieren separar la tipografía de la estructura/color. Hay quienes prefieren mantener los selectores ordenados alfabéticamente y en fin, hay diversas maneras de hacerlo.

Hace un tiempo se publicó un artículo bastante extenso en Smashing Magazine, de donde se pude desprender algunas recomendaciones:

• Resetear previamente los estilos por defecto de los navegadores
• Separar el código css en varios archivos (reset.css, estructura.css, global.css, flash.css, etc. según sea necesario)
• Separar el código en bloques
• Usar «flags» o marcas para poder identificar fácilmente los bloques de código, ejm:

/*----------------------------------------------------
HEADER
----------------------------------------------------*/

• Crear una tabla de contenido al inicio del documento
• Reducir al mínimo el número de selectores, propiedades y hacks
• Crear o utilizar un sistema comun de nombres para los elementos, a fin de reducir el tiempo de desarrollo
• Nombrar adecuadamente nuestros ids o clases, manteniendo la semántica del documento

Y un largo etcétera de opiniones de diferentes desarrolladores que vale la pena ojear.

Fuente: 70-expert-ideas-for-better-css-coding

Alguien conoce algunos otros consejos?