Micaela 25 de octubre de 2009 a las 09.30
   Imprimir artículo
elWebmaster.com

5 tips para mejorar la redacci贸n de tu c贸digo CSS


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

  1. #nav{
  2.    border: solid 1px #DEDEDE;
  3.    color: #000;
  4.    padding: 10px;
  5.     width: 650px;
  6. }

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:

  1. #nav{
  2.    width:650px;
  3. }
  4.     #nav ul li{
  5.        float:left;
  6.     }
  7.         #nav ul li a{
  8.            display:block;
  9.         }

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:

  1. /*-------------------
  2. HEADER
  3. ------------------- */
  4. #header{width:650px;}
  5.    #header a:link,
  6.    #header a:visited{
  7.        color:#0033CC;
  8.    }
  9.  
  10. /*-------------------
  11. NAVIGATION BAR
  12. ------------------- */
  13. #nav{width:650px;}
  14.    #nav ul li{
  15.        float:left;
  16.         padding:0 10px;
  17. }

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:

  1. #main{
  2.    width: 650px;
  3. }
  4.     #main h1{
  5.        color:          #000;
  6.        font-size:      22px;
  7.         font-weight:    bold;
  8.     }
  9.     #main p{
  10.        color:          #000;
  11.        font-size:      12px;
  12.         padding:        10px;
  13.     }

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:

  1. .icon-facebook {
  2.    background:url(facebook.gif);
  3.     padding-left:  26px;
  4.     margin-right:  20px;
  5.     width:        100px;
  6. }
  7. .icon-twitter {
  8.    background:url(twitter.gif);
  9.     padding-left:  26px;
  10.     margin-right:  20px;
  11.     width:        100px;
  12. }
  13. .icon-delicious {
  14.    background:url(delicious.gif);
  15.     padding-left:  26px;
  16.     margin-right:  20px;
  17.     width:        100px;
  18. }

Puedes mejorar el c贸digo anterior de esta forma:

  1. .icon-facebook,
  2. .icon-twitter,
  3. .icon-delicious {
  4.     padding-left:  26px;
  5.     margin-right:  20px;
  6.     width:        100px;
  7. }
  8. .icon-facebook{background:url(facebook.gif);}
  9. .icon-twitter{background:url(twitter.gif);}
  10. .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


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (1)

  1. Joni2Back dice:

    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

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder