Muitas vezes as pessoas usam nomes de classe como textoazul ou bordavermelha. Uma maneira muito melhor para nomear suas classes é relacionar ao conteúdo que aquele trecho de HTML irá abrigar e não  à sua aparência.

Bons nomes não mudam

Pense em algo sobre como ele é, e não com ele deve parecer (sim relacionado a aparência mesmo).

O modo como as coisas se parecem pode mudar, mas o que elas são não.

Exemplo de bons nomes para classes

aviso, imagemparadownload, importante e submenu são todos bons nomes. Eles descrevem o que representa um determinado elemento. Um aviso será sempre um aviso, não importa o quanto a aparência da página mude.

Exemplo de bons nomes ruins para classes

textocurto, bordacom4px e planodefundobonito são exemplos de nomes ruins. Você pode alterar a borda para 5px, ou o plano de fundo pode não ser mais bonito daqui algum tempo.

Uma vantagem de usar CSS é que você não terá que mudar muito para mudar a aparência do seu site. Imagene como ficaria seu CSS se você mudasse todos as classes ‘textovermelho’ e trocasse a cor para azul. Ficaria uma grande bagunça não acha?

Este texto é uma livre tradução/adaptação do original em inlês: Use class with semantics in mind