CSSBlog ES - /* El mejor recurso para enriquecer tu estilo */

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

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:

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

Mira este ejemplo:

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:

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

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

/*****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

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:

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.

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.