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