5 Recomendaciones para codificar mejor nuestro CSS

Este excelente articulo de Developers Paradise nos enseña que el uso del CSS incorrectamente a la larga nos puede traer ciertos problemas de mantenimiento, como por ejemplo al querer cambiar la estructura de una sección y no saber donde están agrupados nuestras clases o simplemente querer cambiar el tipo de fuente de nuestra web y tener la propiedad font-family por casi todo el archivo CSS.
Estas 5 recomendaciones les pueden ayudar a escribir mejor el código CSS.

1. Utilizar CSS Reset

El propósito de esta técnica es restablecer las propiedades CSS que los navegadores ponen por defecto, como alturas de línea, márgenes y tamaños de fuente.

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6,
iframe, blockquote, pre, abbr, acronym, address, big, cite,
code, del, dfn, em, font, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, dd, dl, dt, fieldset,
form, label, legend, table, caption, tbody, tfoot, thead, tr,
th, td, input, select, textarea
{margin:0; padding:0;}

*{margin:0; padding:0;}

2. Aprovechar el CSS Shorthand

Una de las mejores e importantes características de CSS es que nos permite minimizar nuestro código si utilizamos nuestras propiedades con alguna semejanza en las posiciones.
uso inesesario

.margen{
margin-top:10px;
margin-right:7px;
margin-bottom:10px;
margin-left:7px;
padding-top:10px;
padding-right:7px;
padding-bottom:10px;
padding-left:7px;
font-size:12px;
font-weight:bold;
font-family: Arial;
}

La manera correcta:

{
margin: 10px 7px 10px 7px;
padding: 10px 7px 10px 7px;
font:bold 12px Arial, Verdana, Tahoma, sans-serif;
}

3. No crear demasiadas clases ni id’s

El crear y poner a cada elemento una clase e identificador(id) no es necesario y no debería realizarse esta mala practica.
Uso incorrecto de clases

<div id="wrapper" class="wrapper">
<p class="heading">
    <strong class="subheading">Welcome</strong>
</p>
<p class="linka">
    <a href="#" class="link">Home</a>
</p>
<p class="linkb">
    <a href="#" class="link">About</a>
</p>
<p class="linkc">
    <a href="#" class="link">Services</a>
</p>
<p class="linkd">
    <a href="#" class="link">Contact</a>
</p>
</div>

Una manera de solucionar este problema seria:

<div  id="wrapper">
    <h1>Welcome</h1>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

4. Organizar nuestra hoja de estilos agrupándolas por relación.

/*CSS Reset:
aquí pueden poner todo el código para realizar esta técnica*/
/* Elementos básicos: estilos para H1, ul, li, p, etc.*/
/* Clases genéricas: como elementos flotantes, estilos para el body, etc*/
/* Estilos para los contenedores: header, content, footer, sidebar, etc.*/
/* Estilos para sección header*/
/* Estilos para sección content*/
/* Estilos para sección footer*/
/*...*/

5. Utilizar hojas de estilo para navegadores especificos

Internet explorer 6 es el navegador con más bugs y uno de los que necesita hacks para que los estilos se muestren correctamente, este script nos permite utilizar una hoja de estilos especifica para IE6.

<!--[if lte IE 6]>
<link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" />
<![endif]-->