Trucos para tus hojas de estilo (CSS)

Tamaño del texto sin usar pixeles

Si aún no sabes cómo los diseñadores pueden trabajar en sus hojas de estilos usando como unidad “em” en vez de “px”:

body { font-size: 62.5% }

Simplemente especifica un porcentaje para el tamaño del texto y ya puedes empezar a utilizar “em” como medida para el tamaño de las fuentes.

Por ejemplo el estilo para un parrafo quedaría:

p { font-size: 1.2em; line-height: 1.5em; }

Haz el código de fácil lectura

Os propondo esta manera de organizar tus hojas de estilo para facilitar su lectura:

h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }

De esta manera unicamente tendrás que buscar las principales etiquetas y de ellas colgarán las demas etiquetas relacionadas, es altamente recomendable esta forma de organización para tus hojas de estilo.

Separa el código en bloques

Es de sentido común pero la gran mayoria de los diseñadores no lo tienen en cuenta, es muy útil para aquellas hojas de estilos que se desarrollan durante bastante tiempo, puesto que será más sencillo encontrar los diferentes bloques.

/* Estructura */
/* Tipografia */
/* Enlaces */
/* Listas,imágenes */

No escribas código redundante

Muchas veces se tiende a escribir una y otra vez similares etiquetas como “margin: 0; padding: 0;” para cada una de nuestros elementos, es innecesario y tiene una fácil solución simplemente utilizalas como etiquetas por defecto de esta manera:

* { margin: 0; padding: 0; }

Solamente deberás definir estas etiquetas en aquellos elementos que tengan una configuración diferente.