Los archivos CSS complejos pueden llegar a ser muy dÃficiles de manejar, en especial si no utilizas una forma estructurada de escribir y organizar tu código.
En el artÃculo de hoy, te traemos cinco formas simples y prácticas que te ayudarán a la hora de escribir código CSS organizado y legible, para hacer más fácil tu trabajo.
1. Ordena alfabéticamente las propiedades CSS
Cuando comienzas a añadirle propiedades a un elemento CSS, probablemente no prestes atención al orden que estás utilizando para listarlos. Sin duda, una buena opción es utilizar el orden alfabético como en el siguiente ejemplo:
-
#nav{
-
border: solid 1px #DEDEDE;
-
color: #000;
-
padding: 10px;
-
width: 650px;
-
}
De esta forma, si necesitas cambiar una propiedad en especÃfico, será más fácil de encontrar.
2. Indenta los elementos child
Indentar los elementos child de un elemento principal (en el ejemplo #nav) es una buena forma de resaltar las dependencias entre ciertas porciones de código relacionadas:
-
#nav{
-
width:650px;
-
}
-
#nav ul li{
-
float:left;
-
}
-
#nav ul li a{
-
display:block;
-
}
3. Utiliza comentarios para separar secciones lógicas de código
Las lÃneas de comentarios son realmente útiles para mejorar la legibilidad porque, si se utilizan con cierto criterio, pueden ayudarte a separar secciones de código CSS relacionadas con la estructura del documento HTML:
-
/*-------------------
-
HEADER
-
------------------- */
-
#header{width:650px;}
-
#header a:link,
-
#header a:visited{
-
color:#0033CC;
-
}
-
-
/*-------------------
-
NAVIGATION BAR
-
------------------- */
-
#nav{width:650px;}
-
#nav ul li{
-
float:left;
-
padding:0 10px;
-
}
4. Utiliza espacios extra y tabulaciones para separar las propiedades individuales de sus valores
Esta forma de organizar el código CSS, mejora de forma notable la legibilidad de los archives CSS, pero por lo general es muy raro que se implemente:
-
#main{
-
width: 650px;
-
}
-
#main h1{
-
color: #000;
-
font-size: 22px;
-
font-weight: bold;
-
}
-
#main p{
-
color: #000;
-
font-size: 12px;
-
padding: 10px;
-
}
5. Agrupa elementos con las mismas propiedades
Si tienes un grupo de elementos con las mismas propiedades y valores puedes agruparlos en una sola declaración y manejar de forma separada sus diferencias para optimizar el código. Por ejemplo:
-
.icon-facebook {
-
background:url(facebook.gif);
-
padding-left: 26px;
-
margin-right: 20px;
-
width: 100px;
-
}
-
.icon-twitter {
-
background:url(twitter.gif);
-
padding-left: 26px;
-
margin-right: 20px;
-
width: 100px;
-
}
-
.icon-delicious {
-
background:url(delicious.gif);
-
padding-left: 26px;
-
margin-right: 20px;
-
width: 100px;
-
}
Puedes mejorar el código anterior de esta forma:
-
.icon-facebook,
-
.icon-twitter,
-
.icon-delicious {
-
padding-left: 26px;
-
margin-right: 20px;
-
width: 100px;
-
}
-
.icon-facebook{background:url(facebook.gif);}
-
.icon-twitter{background:url(twitter.gif);}
-
.icon-delicious{background:url(delicious.gif);}
Conclusión
Una vez que tu código esté listo, es conveniente crear una versión liviana de tu archivo CSS con un compresor CSS (como http://www.csscompressor.com/ o http://www.cssoptimiser.com/) que te permitirá reducir de gran forma el tamaño de tu archivo CSS.
Fuente: Woork Up
Domingo, 25 de Octubre de 2009 a las 22.47
En el ultimo ejemplo, el code tranquilamente podria ser mas liviano de esta manera
.icon {
padding-left: 26px;
margin-right: 20px;
width: 100px;
}
.icon .facebook{
background:url(facebook.gif); }
Entonces luego definimos la clase como
class="icon facebook"
Saludos buenisimo el blog