No que diz respeito ao HTML, sempre faço questão de ter hierarquias e recuo nos meus arquivos. Por exemplo, se eu tiver um monte de divs:
<div id="content">
<div id="post">
<div class="title">
Blah Blah Title
</div>
</div>
</div>
Suponho que isso seja bastante óbvio para a maioria dos que cria layouts e modelos, mas, na maioria das vezes, apenas vejo HTML ilegível que não possui hierarquia estrutural, dificultando a leitura para outra pessoa. Eu acho que vindo de uma formação mais em CS, isso é algo que fica na minha mente. O mesmo vale para CSS também. Digamos que você esteja criando uma div:
#whatever{
background-image: url('blah.gif');
color: #FFF000;
}
O recuo facilita muito a leitura rápida quando você está acostumado a outro idioma misturado como PHP / Ruby / Whatever. Novamente, depende de como você trabalha melhor, mas quando outras pessoas leem meu HTML, gosto de torná-lo realmente organizado :).
Além disso, como dito acima, é sempre uma boa idéia nomear suas classes CSS e identifica nomes relevantes para o seu layout, especialmente quando fica peludo (como nomear variáveis e métodos em outros idiomas). Outra coisa a observar é o temido "palpite e verificação" de margens, preenchimentos e outros problemas de alinhamento. Algo que muitas vezes tento evitar é colocar números negativos em minhas margens e preenchimentos. Pode ficar confuso se você não fez o layout por conta própria e se quiser voltar a modificá-lo mais tarde e modificá-lo, poderá ser necessário revisá-lo. Na minha opinião, é sempre uma boa idéia não tentar nada hokey ou "kludgy" em CSS, mesmo que pareça bom; geralmente há uma maneira melhor de fazê-lo, mesmo se você precisar reestruturar seu CSS!