Reglas de oro de CSS

Más allá de las controversias y de las diferentes técnicas de programación CSS que uno pueda dominar, hay algunas reglas básicas que no todos conocen, y luego de varios desastres he aprendido.

1- Quitar todos los valores de margin y padding.
Al menos por ahora, cada navegador dispone de sus propias reglas para definir los valores por defecto de margin y padding. En algunos, el margin para los tags h1, h2, h3 es mayor que en otros, lo mismo ocurre con los párrafos, e incluso en internet explorer suele ocurrir que aparecen márgenes para los tags form. La mejor solución como primera medida, es eliminar todos los margin y padding dentro del css, y luego definir los nuestros. Yo he tomado como regla, empezar todos mis archivos .css con la siguiente declaración:

*{
margin: 0px;
padding: 0px;
}

Esto define que absolutamente todos los elementos del documento HTML deben aparecer sin márgenes o espaciados. Luego, se pueden definir manualmente algunos tags:

h1{ margin: 10px 0px 10px 0px; }
h2{ margin: 5px 0px 5px 0px; }

2- Usar Background-image con background-color.
Muchas veces necesitamos que un determinado elemento de la página tenga una imagen de fondo, es importante para que el documento sea CSS válido, que si se define una propiedad background-image, también se defina un background-color. O mejor aún:

elemento.clase{
background: #FFFFFF url("..dirección..");
}

3- Aprovechar la herencia.
La posibilidad de heredar propiedades de un elemento a otros que le suceden es una herramienta muy poderosa, pero si no se tiene en cuenta su existencia, se puede incurrir en casos de trabajo realmente incómodos.

Por ejemplo, ¿es necesario escribir un font-family en 20 etiquetas? Sería mucho más cómodo y legible ubicar dicha declaración sólo en body

body{
font-family: Arial;
}

Luego, todos los demás tags que estén dentro de body, heredarán esta propiedad (todos tendrán el mismo font family), lo que permite definir propiedades más especificas para dichos tags.

h1{font-size: 24px;}
h2{font-size: 20px;}
h3{font-size: 15px;}