HTML, CSS, Javascript - "Baixo Acoplamento e Alta Coesão" (Sim, Por Aqui Também!)

Por causa do Colabre, eu retomei muitas questões de desenvolvimento com HTML, CSS, Javascript -- todos esses assuntos relacionados a front end. E esse post foi inspirado por uma reescrita pesada nas telas. O que gostaria de dizer é:

Evite definir as mesmas classes de elementos HTML que têm propósitos de estilo e Javascript!

Por exemplo, uma classe link-especial de um elemento <a href="/exemplo" class="link-especial">Meu Link Especial</a> não deveria ser usada para deixar esse elemento vermelho, com uma borda preta em baixo e azul em cima e fazer com que elementos dessa classe, sempre que clicados, enviem uma requisição ajax para registrar um log.

.link-especial
{
 border-top: 1px solid blue;
 border-bottom: 1px solid black;
 color: red;
}

(Ok. Eu sei que esse estilo é horrível.)

E

$(".link-especial").click(function(){
 // enviar requisição ajax para registrar log...
});

Talvez para você seja óbvio o motivo de não misturar classes do DOM com propósitos diferentes. Ou talvez nunca tenha tido problema com isso. De toda forma, evite para manter uma boa separação entre estilização e de outros aspectos.

No meu caso, por exemplo, estou mudando todo o Colabre para usar o framework Bootstrap. Se não tivesse separado bem as classes de estilo e as de uso com javascript, teria um trabalho enorme para remover os estilos não mais usados. Você pode usar um prefixo para as classes de uso com javascript -- js-link-logger, por exemplo.

Os princípios de "baixo acoplamento e alta coesão" muito conhecidos na orientação a objetos não são exclusivos ;)