Trabajando en proyectos extensos con muchos desarrolladores, es importante que trabajemos de una manera unificada para, entre otras

cosas:

Mantener las hojas de estilos actualizadas Mantener el cdigo limpio y legible Mantener las hojas de estilos escalables

Existen una variedad de tcnicas que podemos implementar para cumplir estos objetivos. La primera parte de este documento tratar la sintaxis, el formato y la anatoma del CSS, la segunda parte tratar con el enfoque, concepcin y postura a la hora de escribir y organizar CSS.

Contenido

Anatoma de un documento CSS o General o Un archivo vs. varios archivos o Tabla de contenidos o Ttulo de secciones Orden del cdigo Anatoma del conjunto de reglas Convenciones para los nombres o JS Hooks o Internacionalizacin Comentarios o Comentarios Avanzados Selectores quasi-calificados Cdigo de etiquetas Indicadores de Objetos/Extensiones Escribiendo CSS Construyendo nuevos componentes OOCSS Layout Tamao UI o Tamao de fuente Taquigrafa IDs Selectores o Selectores sobre cualificados o Rendimiento de los selectores Indentacin de selectores CSS '!important' Nmeros mgicos y absolutos Hojas de estilos condicionales

Depuracin Preprocesadores

Anatoma de un documento CSS

Sin importar el documento, debemos siempre intentar mantener un formato comn. Esto quiere decir comentarios consistentes, sintaxis consistente y nombres consistentes. General Limita tu hoja de estilos a un mximo de 80 caracteres de largo a ser posible. Las sintaxis de degradados y URL en comentarios pueden ser una excepcin. No pasa nada, no podemos hacer nada al respecto. Prefiero cuatro (4) espacios indentados en tabs y escribir en mltiples lneas el CSS. Un archivo vs. varios archivos Algunos prefieren trabajar con un nico y gran archivo. Esto est bien, y si nos ceimos a estas directrices no encontraremos problemas. Desde que me he pasado a preprocesadores he empezado a dividir mi hoja de estilos en muchos y pequeos includes. Esto tambin es correcto... Cualquiera de los dos mtodos que elijas es aplicable a las reglas y directrices de este documento. La nica diferencia notable se aplica a la tabla de contenidos y los ttulos de nuestras secciones. Si segus leyendo lo entenderis... Tabla de contenidos Al inicio de mi hoja de estilos, mantengo una tabla de contenidos que detalla las secciones mantenidas en el documento, por ejemplo:
/*------------------------------------*\ $CONTENIDO \*------------------------------------*/ /** * CONTENIDO...........Lo ests leyendo!! * RESET...............Establece los valores iniciales * FONT-FACE...........Importamos fuentes de iconos y font-face */

Esto dice al siguiente desarrollados(es) que tome el proyecto exactamente que puede esperar encontrar en este archivo. Cada item en la tabla de contenido marca el ttulo de una seccin.

Si trabajas en una hoja de estilos muy grande, la seccin correspondiente estar en ese archivo. Sin embargo al trabajar con mltiples includes, como en el caso de preprocesadores, cada elemento en la tabla de contenidos marcar el include que imprime esa seccin. Ttulo de secciones La tabla de contenidos sera intil a menos que tuviera su correspondientes ttulos de secciones. Denotad una seccin de la siguiente manera:
/*------------------------------------*\ $RESET \*------------------------------------*/

Asignar el prefijo '$' al nombre de la seccin nos permite efectuar una bsqueda ([Cmd|Ctrl]+F) por '$NOMBRE-SECCIN' y limitar esa bsqueda a los ttulos de seccin solo. Si trabajas con hojas de estilo muy grandes, deja cinco (5) saltos de lnea entre cada seccin, as:
/*------------------------------------*\ $RESET \*------------------------------------*/ [Estilos del reset del CSS]

/*------------------------------------*\ $FONT-FACE \*------------------------------------*/

Este amplio bloque en blanco permite ubicar las secciones cuando se hace un rpido scroll por documentos muy extensos. Si ests trabajando en mltiples hojas de estilo, incluidas, empieza cada una de esas hojas con el ttulo de la seccin y no hay necesidad de saltos de lnea o lneas en blanco.

Orden del Cdigo

Intenta escribir las hojas de estilo en un orden especfico. Esto garantiza que aproveches al mximo la herencia y la primera C de CSS: La cascada. Un correcto orden en la hoja de estilo sera algo como esto:

Reset zona zero. Elementos h1 sin clase, ul sin clase etc. Objetos y abstracciones Patrones de diseo genricos y subyacentes. Componentes Componentes construdos a partir de objetos y sus extensiones. 5. Texturas Estados de error, info, etc... 1. 2. 3. 4. Esto implica que mientras vamos bajando cada una de las secciones del documento se construye y basa su herencia en la anterior. Deberamos deshacer menos estilos, menos problemas en especificar estilos y una mejor arquitectura global de estilos. Como lectura complementaria no podra recomendar lo suficiente el libro de Jonathan Snook SMACSS.

Anatoma del conjunto de reglas

[selector]{ [propiedad]:[valor]; [<- Declaracin ->] }

Tengo un gran nmero de estndares cuando estructuro un conjunto de reglas

Usar un guin que delimite los nombres de las clases (excepto para notaciones BEM ver abajo) 4 espacios de indentacin. Multilnea Declaracin en orden de relevancia (NO orden alfabtico) Indentar los valores con prefijos de navegador, as sus valores quedan alineados. Indentar nuestras reglas para que asemeje la estructura del DOM Siempre incluir el punto y coma final en una declaracin.

Un ejemplo corto:
.widget{ padding:10px; border:1px solid #BADA55; background-color:#C0FFEE; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; } .widget-heading{ font-size:1.5rem; line-height:1; font-weight:bold; color:#BADA55; margin-right:-10px; margin-left: -10px;

padding:0.25em; }

Aqu podemos ver que '.widget-heading' debe ser un hijo de '.widget' ya que tenemos indentado '.widget-heading' un nivel ms que '.widget'. Esta informacin es muy til para los desarrolladores que ahora pueden hacerse una idea del conjunto con tan solo echar un corto vistazo a las indentaciones de nuestras reglas de estilos. Tambin podemos ver que las declaraciones de '.widget-heading' estn declaradas por orden de relevancia; '.widget-heading' debe ser un elemento de texto y podemos empezar con nuestras reglas de texto, seguidas por todas las dems. Una excepcin a nuestra regla multi-lnea sera en el siguiente caso:
.t10 .t20 .t25 .t30 .t33 .t40 .t50 .t60 .t66 .t70 .t75 .t80 .t90 { { { { { { { { { { { { { width:10% } width:20% } width:25% } width:30% } width:33.333% } width:40% } width:50% } width:60% } width:66.666% } width:70% } width:75% } width:80% } width:90% }

/* 1/4 */ /* 1/3 */ /* 1/2 */ /* 2/3 */ /* 3/4*/

En este ejemplo (del sistema de grids de inuit.css) tiene ms sentido dejar nuestro CSS en una sola lnea.

Convenciones para los nombres

Mayormente utilizo clases delimitadas por guiones (Ej: '.foo-bar' y no '.foo_bar' ni '.foobar'), sin embargo, en ciertos casos uso notaciones BEM (Block Element, Modifier - elemento en bloque, modificador). BEM es una metodologa para nombrar y clasificar selectores CSS de manera que los hacemos ms estrictos, transparentes e informativos. La convencin de nombre sigue este patrn:
.bloque{} .bloque__elemento{} .bloque--modificador{}

'.bloque' representa el primer nivel de una abstraccin o componente.

'.bloque__element' representa un descendente de '.bloque' que se ayuda de '.bloque' como un conjunto. '.bloque--modificador' representa un estado diferente de '.bloque'.

Una analoga del funcionamiento de las clases BEM sera:

.persona{} .persona--mujer{} .persona__mano{} .persona__mano--izquierda{} .persona__mano--derecha{}

Aqu vemos como el objeto bsico que estamos describiendo es una persona, y que un tipo diferente de persona podra ser una mujer. Tambin podemos ver que las personas tienen manos; son sub-partes de las personas, y que hay variaciones, como izquierda y derecha. Ahora podemos nombrar nuestros selectores basado en sus objetos base y podemos tambin comunicar que funcin tiene el selector; es un sub-componente ('__') o una variacin ('--')? Entonces, '.page-wrapper' es un selector aislado; no forma parte de una abstraccin o componente y como tal est nombrado correctamente. '.widgetheading' est relacionado a un componente y es un hijo de '.widget', as que deberamos renombrar esta clase a '.widget__heading' BEM se ve un poco feo, y es mucho ms verbal, pero nos garantiza poder espigar las funciones y relaciones de los elementos con sus componentes. BEM a su vez comprime (gzip) muy bien y por ello el repetirlos nos viene bien en documentos comprimidos. Independientemente que uses BEM o no, siempre asegrate que las clases son nombradas muy claramente; mantenlas tan cortas como sea posible pero tan largas como sea necesario. Asegrate que cualquier objeto o abstraccin tienen nombres vagos (Ej: '.ui-list', '.media') para permitir su reutilizacin siempre que sea posible. Las extensiones de objetos deben ser nombradas mucho ms explcitamente (Ej: '.user-avatar-link). No te preocupes por la longitud o cantidad de clases; gzip comprimir todo el cdigo bien escrito increblemente bien. Clases en HTML Haz las cosas fciles de leer, separa tus clases en HTML con dos (2) espacios en blanco:
<div class="foo--bar bar__baz">

Este espacio en blanco incrementado permitir ubicar con mayor facilidad y mejorar la lectura de mltiples clases.

JS hooks Nunca uses una clase de CSS de estilos como un hook de JS.Adjuntar comportamientos de JS a clases de estilo quiere decir que nunca podremos tener una sin la otra Si necesitas enlazar a alguna etiqueta usa una clase especfica de JavaScript,. Simplemente es una clase que empiece por '.JS-' , Ej: '.js-toggle', '.js-drag-anddrop' y de esta manera podemos agregar ambas clases, JS y CSS, a nuestra etiqueta pero nunca se sobrepondrn una a la otra.
<th class="is-sortable </th> js-is-sortable">

El marcado anterior contiene dos clases; una a la cual podemos adjuntar estilos y otra que permite agregar la funcionalidad. Internacionalizacin A pesar de ser britnico - y escribir toda mi vida colour en vez de color - creo que, por el bien de la consistencia, es mejor usar siempre Ingls Americano en CSS. CSS, as como la mayora (si no todos) de otros lenguajes, est escrito en Ingls Americano, con lo cual mezclar sintaxis como 'color:red' con clases como '.colourpicker {}' carece de consistencia. Anteriormente he sugerido y defendido escribir clases bilinges, como por ejemplo:
.color-picker, .colour-picker{ }

Sin embargo, tras haber trabajado recientemente en un proyecto bastante largo en Sass donde haban docenas de variables de colores (Ej: '$brand-color', '$highlightcolor' etc.) mantener dos versiones de cada variable se volvi agotador. Esto tambin quiere decir un doble trabajo con funciones como buscar y reemplazar. En beneficio de la consistencia, siempre nombra clases y variables en el lenguaje en el que ests trabajando. Nota del traductor

En mi opinin siempre usara ingls: nada impide a desarrolladores de otros idiomas continuar nuestro trabajo y necesitamos una consistencia.

Comentarios
Uso comentarios estilo docBlock-esque a los que limito a 80 caracteres de longitud:

/** * Esto es un comentario estilo docBlock * * Esta es una descripcin ms larga del comentario, describiendo el cdigo con ms * detalle. Limitamos estas lneas a 80 caracteres de longitud * * Podemos tener etiquetado en el comentario, y de hecho es recomendable: * <div class=foo> <p>Lorem</p> </div> * * No ponemos un asterisco como prefijo en las lneas de cdigo, ya que inhibira * copiar y pegar. * */

Deberas documentar y comentar tu cdigo tanto como sea posible, lo que puede parecer transparente y que se explica por s mismo podra no serlo para otro desarrollador. Escribe un trozo de cdigo y luego escribe sobre l. Comentarios avanzados There are a number of more advanced techniques you can employ with regards comments, namely:

Selectores Cuasi-calificados Cdigo de etiquetas Indicadores de Objetos/Extensiones

Selectores Cuasi-calificados

Nunca deberas clasificar tu selector, esto es, nunca debemos escribir 'ul.na{}' si podemos tener '.nav{}'. Calificar selectores disminuye el rendimiento del selector, inhibe la posibilidad de rehusar una clase en un elemento diferente y disminuye su adecuacin. Estas son cosas que debemos evitar a toda costa. Sin embargo, a veces es til comunicar al siguiente desarrollador(es) dnde pretendes usar esa clase. Tomemos '.product-page' por ejemplo; esta clase suena como si debiera ser usada en un contenedor principal, quizs el elemento 'body' o 'html' pero es difcil de decir de verdad dnde se debe usar. Cuasi-calificarndo este selector (Ej: Comentando el selector principal) podemos comunicar dnde queremos que se use esta clase, algo como: /html/.product-page{} Ahora podemos ver dnde usar esta clase exactamente pero sin las especificaciones que modifiquen la clase para evitar que sea rehusada.

Otro ejemplo puede ser:

/*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{}

Se puede ver dnde queremos usar esta clase pero sin que afecte al selector.
Cdigo de etiquetas

Si escribes un nuevo componente entonces deja algunas etiquetas relativas a su funcin en un comentario, por ejemplo:
/** * ^navigation ^lists */ .nav{} /** * ^grids ^lists ^tables */ .matrix{}

Estas etiquetas permiten a otros desarrolladores encontrar snippets de cdigo buscando por su funcin; si un desarrollador necesita trabajar con listas, puede ejecutar una bsqueda por '^lists' y encontrar los objetos '.nav' y '.matrix. (y posiblemente ms).
Indicadores de Objetos/Extensiones

Cuando trabajamos orientados a objetos encontrars a menudo dos trozos de cdigo CSS (siendo uno el esqueleto - el objeto - y otro siendo su skin o piel - la extensin -) que estn relacionados, pero que habitan en sitios muy diferentes. Para establecer un vnculo entre el objeto y el uso de su extensin estn los Indicadores de Objetos/Extensiones. stos son simples comentarios que funcionan as: En tu hoja de estilos base:
/** * Extiende `.foo` en theme.css */ .foo{}

En tu hoja de tema, skin o layout:

/** * Extendido de `.foo` en base.css */ .bar{}

Hemos establecido una relacin concreta entre dos trozos de cdigo muy separados.

Escribiendo CSS
Las secciones anteriores tratan acerca de la estructura y forma de nuestro CSS; son reglas y normas cuantificables. La siguiente seccin es un poco ms terica y trata acerca de nuestra actitud y punto de vista.

Construyendo nuevos componentes

Cuando construyamos nuevos componentes escribe el marcado (HTML) antes del CSS. Con esto podrs visualizar que propiedades CSS son heredadas y as evitar replicar estilos redundantes. Escribiendo el marcado primero te enfocas en datos, contenido y semntica y luego aplicas slo las clases relevantes y el CSS.

OOCSS
Yo trabajo bajo OOCSS; Divido los componentes en estructura (objetos) y skin (extension). Como analoga (No ejemplo) observad lo siguiente:
.habitacin{} .habitacin--cocina{} .habitacin--cuarto{} .habitacin--bao{}

Tenemos diferentes tipos de habitaciones en una casa, pero todas ellas reciben un trato similar; todas tienen suelo, techo, paredes y puertas. Podemos compartir esta informacin con una clase abstracta '.habitacin{}. Sin embargo, tenemos diferentes tipos de habitacin que las difieren de otras; la cocina puede tener un suelo de baldosas y el dormitorio puede tener alfombra, un bao puede no tener ventana pero es muy probable que un cuarto si la tenga, y cada habitacin puede tener las paredes de diferente color. OOCSS (Object Oriented CSS) nos ensea a abstraer los estilos compartidos en un objeto base y luego extender esta informacin con clases ms especficas que aadan estilo(s) nico(s). Entonces, en vez de construir docenas de componentes nicos, prueba a identificar patrones de diseo repetidos y abstrelos dentro de clases reusables; construye esqueletos como 'objetos' base y luego enclavija clases a stos objetos para extender sus estilos en circunstancias ms especficas o nicas.

Si tienes que construir nuevos componentes divdelos en estructura y skin; construye la estructura del componente usando clases muy genricas de manera que se puedan rehusar y aadirle las clases ms especficas para estilizar y aadir diseo.

Layout
Todos los componentes que construyas no deben tener anchos (width); deben ser fluidos y su anchura regida por su contenedor o por su grid. Nunca se deben aplicar alturas (height) a los elementos. La altura debe ser solo aplicada a los elementos con unas dimensiones dadas antes de introducirse en el layout (Ej: sprites o imgenes). Nunca establezcas altura a 'p', 'ul', 'div', o a cualquier otro elemento. normalmente puedes obtener el efecto deseado con 'lineheight' que es de lejos mucho ms flexible. Los sistemas de grids deben ser pensados como estanteras. Tienen contenido pero no son contenido en si. Tu montas las estanteras y luego las llenas con tus cosas. Configurar nuestras grids separadas de nuestros componentes nos permite mover componentes mucho ms fcil que si tienen dimensiones configuradas; esto hace nuestro front-end mucho ms adaptable y nos permite trabajarlo ms rpido. Nunca deberas aplicar estilos a un elemento del sistema de grid, son para efectos de disposicin nicamente. Aplica estilos al contenido dentro del elemento del grid. Nunca, bajo ninguna circunstancia, debemos aplicar propiedades al modelo de caja de un elemento del grid.

Medidas
Uso una combinacin de mtodos para los tamaos. Porcentajes, pixels, ems, rems y nada en absoluto. El sistema de grids debe, idealmente, estar dado en porcentajes. Ya que uso el grid para controlar el ancho de columnas y pginas, puedo dejar componentes sin dimensiones definidas (tal como se expuso anteriormente). Los tamaos de fuentes deben darse en rems con fallback en pixels. As se aprovechan los beneficios de accesibilidad de los rems con la robustez de los pixels. Aqu os dejo un mixin de Sass para trabajar con rems y dejar un fallback en pixels (asume que has declarado una variable para el tamao de fuente en algn lado):
@mixin font-size($font-size){ font-size:$font-size +px; font-size:$font-size / $base-font-size +rem; }

Y en Less:
.font-size(@font-size: 16) { @rem: (@font-size / 10); font-size: @font-size * 1px; font-size: ~"@{rem}rem"; }

Slo uso pixels para elementos cuyas dimensiones estn previamente definidas antes de entrar en el sitio. Esto incluye elementos como imgenes y sprites cuyas dimensiones estn heredadas y configuradas en pixels. Tamaos de fuentes Yo defino una serie de clases parecidas a un sistema de grids para los tamaos de fuentes. Estas clases pueden ser usadas para dar estilos a una tipografa en un doble encabezado. Para una completa explicacin sobre como funciona, leer mi artculo Pragmatic, practical font-sizing in CSS

Shorthand
Los shorthand de CSS deben usarse con precaucin. Es tentador usar declaraciones como 'background:red;' pero hacindolo lo que de verdad dices es 'no quiero que la imagen haga scroll, que se alinee arriba a la izquierda, que se repita en el eje X y en el eje Y, y con un fondo rojo'. Nueve veces de 10 esto no causar ningn problema pero esa sola vez que lo causa es suficiente para evitar el uso de shorthands. En vez de ello, usa 'backgroundcolor:red;'. Similarmente, declaraciones como 'margin:0;' estn bien y son cortas, pero s explcito. Si lo que quieres de verdad afectar es solo el margen en el inferior de un elemento entonces es ms apropiado usar 'margin-bottom:0;'. S explcito en que propiedad estableces y ten cuidado de no desconfigurar otras por error al usar un shorthand. Ej: Si quieres solo eliminar el margen inferior de un elemento no tiene sentido establecer todos los mrgenes a 0 con 'margin:0;'. Los shorthands son buenos, pero pueden hacer caer en malas prcticas fcilmente.

ID
Una pequea anotacin acerca de IDs en CSS antes de entrar a ver selectores en general. NUNCA usis IDs en CSS.

Pueden ser usados en tu marcado para referencias de JS, pero usad slo clases para estilos. No queris ver una sola ID en ninguna hoja de estilos! Las clases vienen con el beneficio de ser reusables (an si no queremos, podemos) y tienen un buen y bajo especificado. El especificado es una de las formas ms rpidas de afrontar dificultades en proyectos y mantenerlo bajo en todo momento, es imperativo. Una ID es 255 veces ms especfico que una clase, por ello nunca los uses en CSS.

Selectores
Mantn los selectores cortos, eficientes y portables. Selectores basados en su posicin son malos por una variedad de razones. Por ejemplo, tomemos '.sidebar h3 span{}'. Este selector est basado en la posicin y por ello no podemos mover ese 'span' fuera de un 'h3' fuera de un '.sidebar' y mantener el estilo. Los selectores que son muy largos tambin introducen problemas de optimizacin. Cuantas ms verificaciones hay en un selector (Ej: '.sidebar h3 span' tiene tres verificaciones, '.content ul p a' tiene cuatro), ms trabajo tiene el navegador. Siempre que sea posible nos aseguraremos que los estilos no dependan de la posicin en el CSS, as como nos aseguraremos que los selectores son buenos y cortos. Los selectores en general deben mantenerse cortos (Ej: una clase de profundidad) pero los nombres de las clases en s mismas deben ser tan largas como lo necesiten. Una clase de '.user-avatar' siempre es mejor que '.usr-avt' Recordad: Las clases no son semnticas o dejan de serlo; ellas son sensibles o insensibles! Dejad de peocuparos por la 'semntica' de los nombres de las clases y elige algo sensato y previsor. Selectores sobre-calificados Como ya comentamos anteriormente, selectores calificados son malas noticias. Un selector sobre calificado es como 'div.promo'. Probablemente podras obtener el mismo resultado usando slo '.promo'. Claro, algunas veces querrs calificar una clase con un elemento (Ej: si tienes una clase genrica '.error' que debe verse diferente cuando se aplica a un elemento diferente (Ej: '.error{color:red;}' 'div.error{padding:14px;}')), pero generalmente se evita siempre que sea posible. Otro ejemplo de un selector sobre calificado sera 'ul.nav li a {}'. Al igual que arriba, podemos eliminar instantneamente el 'ul' y ya que sabemos que '.nav' es una

lista, podemos saber que cualquier 'a' debe ir en un 'li', as que podemos cambiar 'ul.nav li a{}' por '.nav a{}'. Rendimiento de los selectores Aunque es verdad que los navegadores son cada vez ms rpidos renderizando CSS, la eficiencia es algo en lo que siempre deberamos tener un ojo puesto. Selectores cortos, no anidados, sin usar el selector universal ('*{}') y evitando selectores complejos de CSS3 ayudarn a evitar problemas de rendimiento.

Propsito de los selectores CSS

En vez de utilizar selectores para perforar el DOM hasta un elemento, muchas veces es mejor poner una clase en el elemento que queremos estilizar o modificar. Tomemos un ejemplo en concreto con un selector como '.header ul{}'... Imaginemos que 'ul' es la navegacin principal de nuestro sitio. Habita en el header como es de esperar y actualmente es el nico 'ul' ah. '.header ul' funcionar, pero no es ideal o aconsejable. No es muy seguro en futuros cambios y ciertamente no es lo suficiente explcito. Apenas agreguemos otro 'ul' a ese encabezado adoptar el estilo de nuestra navegacin principal y lo ms probable es que no queramos eso. Esto quiere decir que tendramos que reestructurar cdigo o deshacer mucho estilo en los subsecuentes 'ul' dentro de ese '.header'. El propsito de tu selector debe coincidir con el motivo de estilizar algo; pregntate a ti mismo 'Estoy seleccionando esto porque es un 'ul' dentro de '.header' o porque es la navegacin principal de mi sitio?'. La respuesta a esto determinar tu selector. Asegrate que tu selector clave nunca es una clase tipo/elemento u objeto/abstraccin. No queremos ver clases como '.sidebar ul{}' o '.footer .media{}' en nuestros estilos. S explcito; selecciona el elemento al que quieres afectar, no su padre o contenedor. Nunca asumas que el marcado no va a cambiar. Escribe selectores que hagan objetivo a lo que quieres, no a lo ya est ah. Para una lectura ms profunda en el propsito de los selectores:Shoot to kill; CSS selector intent

'!important'
Est bien utilizar '!important' slo en clases helper. Aadir '!important' preventivamente es correcto, Ej: '.error{ color:red!important;}', como ya sabrs siempre querrs que esta regla tenga prioridad.

Usar '!important' sensiblemente, Ej: para salir de malas situaciones de especificacin, no es recomendado. Rehaz tu CSS e intenta combatir estos problemas reconstruyendo tus selectores. Mantener tus selectores cortos y evitando IDs ayudar enormemente.

Nmeros mgicos y absolutos

Un nmero mgico es un nmero usado porque 'funciona'. Son malos porque raramente funcionan de verdad y no son muy seguros o flexibles/indulgentes. Tienden a solucionar sntomas y no problemas. Por ejemplo, usar '.dropdown-nav li:hover ul{ top:37px; }' para mover un desplegable abajo de la navegacin en hover est mal, ya que 37px es un nmero mgico. 37px slo funciona aqu porque en este escenario en particular el '.dropdown-nav' tiene 37px de alto. En vez de eso, deberas usar '.dropdown-nav li:hover ul{ top:100%; }' que quiere decir que no importa el alto de '.dropdown.nav', el desplegable siempre se colocar a 100% del borde superior. Piensa cada vez que escribes un nmero para que encaje en el layout; si puedes evitarlo usando 'aliases' (Ej: 'top:100%' para indicar 'todo a partir del borde superior') o an mejor sin medida alguna. Escribir medidas para que encajen en el layout es un compromiso que no necesariamente querrs mantener.

Hojas de estilos condicionales

Las hojas de estilos para IE pueden, sobradamente, ser evitadas en su totalidad. La nica vez que puede necesitarse una hoja de estilo alternativa para IE es para eludir falta de soporte (Ej: ajustes para PNG). Como regla general, todas las reglas de tu layout y modelo de cajas (box-model) pueden funcionar y funcionarn sin una hoja de estilos para IE si reestructuras y trabajas tu CSS. Esto quiere decir que no queremos ver '<!--[if IE 7]> elemento{ margin-left:-9px; } < ![endif]-->' u otra parecida que claramente tiene un uso arbitrario para hacer que 'las cosas funcionen'.

Depuracin
Si te encuentras con un problema de CSS quita cdigo antes de empezar a agregar ms en un intento por solucionarlo. El problema existe en el CSS ya escrito, ms CSS no es la solucin adecuada.

Borra trozos de CSS y marcado hasta que el problema desaparezca, as puedes determinar en que parte o lnea reside el problema. Puede ser tentador poner un 'overflow:hidden;' en un elemento para ocultar los efectos de un error en el layout, pero overflow nunca fue probablemente el problema. Arregla el problema, no sus sntomas.

Preprocesadores
Nota del traductor: Harry Roberts (@csswizardry), autor de este texto, usa Sass, la idea e incluso las tcnicas que se exponen a continuacin son perfectamente adaptables a cualquier otro preprocesador // Sass es mi preprocesador elegido. Usadlo con cuidado. Usa preprocesadores para mejorar la creacin de CSS pero evita anidaciones exageradas! Anida slo cuando sea necesario en vanilla CSS, Ej:
.header{} .header .site-nav{} .header .site-nav li{} .header .site-nav li a{}

Sera totalmente innecesario en un CSS normal, de manera que lo que sigue estara mal Sass/Less:
.header{ .site-nav{ li{ a{} } } }

Lo correcto sera escribirlo as:

.header{} .site-nav{ li{} a{} }