Optimizar tus archivos CSS para que sean de facil lectura

Algunos de los lectores me escribieron acerca de como sería la forma correcta de escribir código CSS limpio , prolijo y ordenado de forma que sea más facil a la hora de hacer modificaciones o simplemente añadir funcionalidades.
De más cabe decir que todo lo que voy a exponer a continuación es simplemente mi punto de vista y la forma que suelo tener para trabajar en mis proyectos. Con esto quiero decir que según el tamaño y complejidad de nuestro sitio nos puede servir más o menos.

Partiendo de la estructura típica de una página web los pasos a seguir suelen ser:

1.- Definir los elementos de la página:

Al principio del archivo CSS suelo definir los diferentes elementos en común de la página como el body , a , h1, etc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

 
/* ------------------------------- */
/* HTML Elements
/* ------------------------------- */
html {font-family:arial, verdana, sans serif; font-size:13px;}
a:link, a:visited{color:#0033CC;}
a:hover{color:#003366;}
h1, h2, h3, h4, h5, h6,
form, input, text-area{
border:0; padding:0; margin:0;
font-family:arial, verdana, sans serif;}
h1{font-size:24px; color:#000000;}
h2{font-size:18px; color:#666666;}
...

2.- Diferenciar las secciones de la página:

Algo que me ayuda a mantener el order es diferenciar las diferentes secciones mediante el uso de comentarios.

1
2
3
4
5
6
7
8
9
10
11
12
13

#container{...}
/*---- Top section ----*/
#header{...}
#navbar{...}
 
/*---- Contenido Principal ----*/
#menu{...}
#main{...}
           /*---- Barra lateral ----*/
            #sidebar{...}
 
/*---- Footer ----*/
#footer{...}

3.- Usar la tabulación

Para que el código quede más legible es bueno usar el tabulador. Por ejemplo si un elemento solo tiene 3 propiedades lo ponemos en la misma lista, en cambio si posee más atributos lo hacemos en diferentes

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#topbar{width:auto; display:block; height:60px;}
#navbar{width:auto; display:block; height:30px;}
          #navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
          #navbar a{color:#FFFFFF; font-weight:bold;}
          #navbar a:hover{background:#777777;}
          #navbar li a:link,
          #navbar li a:visited {
                    background:#444444;
                    text-decoration:none;
                    height:30px;
                    line-height:24px;
                    display:inline;
                    float:left;
                    width:auto;
                    padding:0px 10px;}
 
#main{width:auto; display:block;}

4.- Definir clases en comun

Al final de el archivo CSS suelo declarar las clases que hay en comun como por ej:

1
2
3

.small{font-size:11px;}
.underline{text-decoration:underline;}
div.spacer{clear:both; height:15px; display:block;}

Como mencione anteriormente estas más que reglas son apreciaciones personales que fui añadiendo con el tiempo a mi trabajo. Sobre todo viendo la forma de trabajar de otros y leyendo alguna que otra guia por internet.

Cuando el proyecto que tengo es más grande suelo utilizar multiples archivos CSS , por lo general tengo el default.css que lleva las reglas generales, y otros que voy enlazando segun la página que sea.

Espero que les haya servido de ayuda. En el próximo voy a hablar sobre la forma de nombrar a los diferentes elementos de una web de una forma más semántica.