Optimizar tus archivos CSS para que sean de facil lectura

Publicado en June 7, 2009 by Damian

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.

estructura

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.

/* ------------------------------- */
/* 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.

#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

#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:

.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.

Rating: 0.0/5 (0 votes cast)

Comparte este artículo: