Il problema sta nella gestione della memoria interna, IE ne gestisce pochina, e se crei molti elementi in sottoclassi, rischi che non te la gestisce più come ha ribadito Blakwolf.
In pratica non mettete trppe prioprietà dentro le classi aggiunte.

I colori a tre cifre: sono i codici per i colori così detti websafe, ovvero blue, Yellow ... eccetera, ovviamente sono riconosciuti, visto che proprio il w3c li ha definiti.

Snellire il codice, attenzione perché non funziona con classi complesse, per esempio la proprietà font crea scompensi.

dichiarare nel body tanto per dire font: italic 100 1em Verdana; crea sì tutti gli elementi per avere quello che ho chiesto.
Ma se poi per esempio in una classe derivata così:
#contenuto p {font: 1.2em;} scopro che non diventa affatto di 1.2 em, ma uguale a quello dichiarato nel body.
bisogna sempre ricordargli che comunque #content è figlia di body o non prenderà la prorpietà creata in quest'ultimo.
Quindi : body > #content solo che l'operatore > non è visto da IE.

La cosa si semplifica parecchio specificando sempre font separatamente per ogni sua sottoproprietà, allora non hai problemi di crossbrowsing.
Ah, è un problema solo di font, ho notato che con border e background non capita.

Altra cosa, non è che dicendo border: #000 ti arriva sempre un bordo medio, è vero che è medio, solo che con IE apparirà più grande che con Mozilla, dato che questi due browser usano un modello matematico diverso per calcolare i valori discreti e riportarli in pixel fisici; in pratica è un problema di approccio agli arrotondamenti dei valori reali.
Infatti, thick, medium e thin, non hanno sempre lo stesso valore, ma dipende dal browser.
Quindi attenzione a togliere, se abbiamo delle classi semplici, è meglio mantenere tutti i valori richiesti.
In particolare in quell'articolo si specifica che thick, può essere di 3 o 4 pixel, quindi dipende.

Se non si hanno particolari esigenze, andrà pure bene, ma altrimenti è meglio specificare bene i pixel.