pasos-escribir-mejor-css

Cada uno tiene su método para poder trabajar mejor con sus hojas de estilos (CSS). En esta entrada se muestran 5 pasos a seguir para poder escribir mejor nuestros códigos CSS (Son usados por una gran mayoría, así que son fiables). Empezemos:

1. Resetear

reset

Siempre es bueno resetear nuestro estilos, ya que hay veces en los que los atributos no se compatibilizan correctamente con el navegador, por lo tanto debemos resetearlos.

Un ejemplo de reseteo para poner margin y padding 0 a todos nuestros elementos, sería este:

Select Code
html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote,
pre, form, fieldset, table, th, td { margin: 0; padding: 0; }


Pero esto da muchas limitaciones, recomiendo que se lea la lista de ténicas CSS que mostramos anteriormente, para hacer un reseteo mucho más completo.

2. Alfabetizar

Photo por kvh

Mira este ejemplo:

Select Code
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}


Ahora mirad este:

Select Code
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}


¿No encuentras mucho mejor las propiedades si están alfabetizadas? Aunque no marcan cierta lógica, pueden ayudarnos a localizar las propiedades de forma rápida.

Recomiendo mirar estas formas de ordenar nuestras propiedades si no os gusta este método.

3. Organización

organize

Podrías organizar mejor tu hoja de estilos si la organizas según su estructura usando comentarios. Por ejemplo:

Select Code
/*****Encabezado*****/
Definir estilos para los encabezados: h1, h2, h3...

/*****Estructura básica*****/
Define la estructura básica de nuestro sitio: header, footer, etc o elementos que ayudan a completar la estructura básica de nuestro sitio.

/*****Header*****/
Define todos los elementos del header.

/*****Content*****/
Define todos los elementos del body.

/*****Footer*****/
Define todos los elementos del footer.

/*****Continuar...*****/


Y continuar definiendo secciones y secciones.

4. Consistencia

ijioj

Cuando más consistente se vuelva nuestro código CSS, mejor. Podemos aplicar esta consistencia dando reglas. Por ejemplo, si una clase contiene menos de 3 propiedades, se definirán en una sola línea, y si contiene más de 3, se mostrarán en varias líneas:

Select Code
p { border: 1px solid white; color: #fff; font-size: small; }

.miclass {

width: 30px;

height: 20px;

border: 3px dashed #000;

text-decoration: underline;

color: #ccc;

}

5. Sigue el camino adecuado.

right-place

Sigue el camino correcto al trabajar con CSS: Cierra bien las tags, no uses definiciones obsoletas, mantente a la última con las nuevas opciones para CSS que vayan saliendo (CSS3), sé cuidadoso y estricto para intentar tener un código válido (W3C).

Vía | Nettus

Imágenes | redux, kvh, allyaubryphotography, sailor_coruscant, odolphie.

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!