Utiliza Clases o Ids en vez de etiquetas html

A priori, puede parecer una tontería, pero para aplicar estilos no debemos referenciar por etiquetas html, siempre lo debemos hacer por clases o ids. De ésta forma el estilo es independiente de la etiqueta que utilicemos en el html.

Nos ha pasado alguna vez, que hemos referenciado a los elementos html, por ejemplo a un párrafo y luego nos ha interesado que sea un div y ¡fiesta! al cambiar el tipo de etiqueta se pierden todos los estilos y referencias CSS.

Mal:

ul{

    li.mi-elemento{

    }

}

Bien:

.mi-listado{

    >.mi-elemento{

    }

}

Aprovechando el ejemplo anterior, es aconsejable indicar la profundidad del selector css con >, ya que resulta mejor a nivel de rendimiento y también nos puede ahorrar problemas a la hora de maquetar.

Precisamente me pasó el otro día, donde tenía un listado de productos y dentro de cada producto, un listado de colores. Al no haber indicado el nivel de profundidad en mis <li> el listado de colores me heredaba estilos que no deseaba.

Hace poco twitteamos un link muy interesante sobre cómo escribir selectores CSS eficientes, esperamos que os guste:

http://csswizardry.com/2011/09/writing-efficient-css-selectors/