post

7 Consejos para Mejores Prácticas en CSS

styleBueno ahora que estamos prácticamente  jugando con los Nuevos Ganchos en Génesis 2.0.  Es el momento ideal para empezar a hacer las cosas como debe ser, por eso les presentamos a continuación cual es la mejor forma en que debemos aplicar las mejores prácticas de CSS cuando codifiquen el marco de Génesis 2.0 versiones anteriores o cualquier CSS de cualquier diseño web:

1. Alfabetizar las propiedades de las declaraciones en bloques.

Forma correcta de hacerlo:

#content {
    background-color:#fff;
    border: 1px solid #ddd;
    margin: 0 0 20px;
    padding: 20px;
}

Forma erronea de hacerlo:

#content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 0 0 20px;
    background-color: #fff;
}

2. Utilice hexcodes de 3 dígitos cuando aplique.

Forma correcta de hacerlo:

#content {
    background-color: #fff;
}

Forma erronea de hacerlo:

#content {
    background-color: #ffffff;
}

3. Utilice las letras minúsculas en los hexcodes cuando aplique.

Forma correcta de hacerlo:

#content {
    background-color: #fff;
}

Forma erronea de hacerlo:

#content {
    background-color: #FFF;
}

4. Coloque un selector por cada línea para exponer las reglas.

Forma correcta de hacerlo:

.menu-primary,
.menu-secondary,
#header .menu {
     background-color: #fff;
}

Forma erronea de hacerlo:

.menu-primary, .menu-secondary, #header .menu {
     background-color: #fff;
}

5. Coloque una declaración por cada línea con conjuntos de reglas.

Forma correcta de hacerlo:

#content {
    background-color: #fff;
    border: 1px solid #ddd;
    margin: 0 0 20px;
    padding: 20px;
}

Forma erronea de hacerlo:

#content {
    background-color:#fff; border: 1px solid #ddd; margin: 0 0 20px; padding: 20px;
}

6. Consolidar valores repetidos dentro de una declaración.

Forma correcta de hacerlo:

#content { 
    padding: 10px 20px;
}

Forma erronea de hacerlo:

#content {
   padding: 10px 20px 10px 20px;
}

7. No sangrar el corchete de cierre en un conjunto de reglas.

Forma correcta de hacerlo:

#content {
   background-color: #fff;
}

Forma erronea de hacerlo:

#content {
   background-color: #fff;
   }

Speak Your Mind

*