Usar hojas de estilo (CSS) resulta fundamental a la hora de diseñar una página web, te permite dar estilo a todos los elementos de tu web y controlar de una manera ordenada cómo se presenta la información, sin mencionar el hecho de lo fácil que resulta modificar el estilo de múltiples páginas a la vez cuando éstas comparten la misma hoja de estilos. De todas maneras, si quieres saber las ventajas de usar CSS, puedes leer el siguiente artículo sobre ello: CSS, sitios que van un paso por delante.

Ahora bien, a pesar de tener multitud de ventajas, el uso de CSS requiere de aprendizaje, y aquellos que no están acostumbrados a usarlo suelen tener problemas comunes cuando se meten en la tarea de dar estilo a sus páginas web, en especial con navegadores obsoletos como el insufrible Internet Explorer 6, por suerte en proceso de extinción.

No te asustes, no eres el único, con frecuencia el uso de CSS se atraganta a diseñadores noveles (y no tan noveles). En este artículo voy a explicar algunos conceptos que se confunden con frecuencia en diseño web, para intentar evitar más quebraderos de cabeza de los necesarios.

reset.css

Los navegadores tienen estilos CSS por defecto para ciertas estructuras, por ejemplo para los enlaces, encabezados -h1, h2… – sin olvidar margins y paddings. Si queremos (por nuestro bien) empezar a maquetar con una hoja de estilos realmente limpia, es más que recomendable el uso de resets para CSS, algunos de los más conocidos son: reset de Eric Meyer, reset de Yahoo.

Yo por costumbre suelo usar el de Eric Meyer, pero adaptándolo a las necesidades de cada proyecto.

La herencia y la especificidad en CSS

Cuando estamos aprendiendo a maquetar con CSS, es frecuente llenar nuestro HTML de clases e id, la mayoría innecesarias. En CSS es importante tener en cuenta la herencia y la especificidad para simplificar el código.

La herencia en CSS es una de sus propiedades fundamentales, es importante comprenderla y acostumbrarse a jugar con ella para desarrollar códigos optimizados y limpios. Cuando determinas el valor de una propiedad CSS en un elemento, por ejemplo un div, los elementos hijos de ese elemento la heredan automáticamente.

Por ejemplo, tenemos un div con un tamaño de letra de 2em.

#divUno {font-size:2em;} /*tamaño de fuente 2em */

Por herencia, todos los párrafos, enlaces, listas, etc. y en general cualquier texto que contenga ese div, tendrá automáticamente un tamaño de letra de 2em.

Este efecto se puede anula por medio de la especificidad. Supongamos que en ese mismo div, le damos a los párrafos un tamaño de letra de 1.5em. Entonces, todos los elementos contenidos dentro del div tendrán un tamaño de letra de 2em salvo los párrafos, que serán de 1.5em.

#divUno {font-size:2em;} /*tamaño de fuente 2em */
#divUno p {font-size:1.5em;} /*tamaño de fuente 1.5em, más especifico */

Los párrafos aplican el valor de 1.5em porque esa regla es más específica que la primera. Además, no hemos tenido que asignarle una clase adicional a la etiqueta p, puesto que por medio de su identificador padre hemos filtrado.

Cuándo usar class y cuándo usar id

En relación a lo anterior, es necesario entender la diferencia entre las clases y los id.

En CSS se puede definir una propiedad por medio de class o id indistintamente. No obstante, las implicaciones de usar uno u otro son distintas. Básicamente:

• class: se utiliza cuando una estructura se repite más de una vez en la misma página de un sitio web.
• id: se utiliza cuando una estructura se usa una única vez en la misma página de un sitio web.

Ahora bien, ya que sabemos qué es la herencia y la especificidad, hay que decir que un id es más específico que una clase. Es decir, si tengo esto para el mismo párrafo:

#idUno {color:#000;} /*color negro*/
.claseDos {color:#FFF;} /*color blanco*/

<p id="idUno" class="claseDos">Párrafo de ejemplo</p>

El texto del párrafo se verá negro, porque el id esd más específico que la clase y sobreescribe al valor dado en .claseDos.

Los id sólo se pueden usar una vez dentro de cada página, las clases pueden usarse tantas veces como sea necesario.

Usar shorthand CSS, reagrupar el código CSS

Cuando aprendemos a maquetar tendemos a poner líneas de código innecesarias, uno de los principales causantes es el no saber reagrupar el código CSS como corresponde. Un ejemplo:

En lugar de escribir esto:

#content {
background-color: #FFF;
background-image: url(../img/bg-content.gif);
background-repeat: no-repeat;
background-position: top left;
}

Podemos usar esto, que hará exactamente lo mismo:

#content {
background: #FFF url(../img/bg-content.gif) no-repeat top left;
}

En el próximo capítulo de esta serie veremos más consejos para crear hojas de estilo limpias y optimizadas.