Ele é um agrupador. Sempre que tiver elementos do HTML que merecem ser agrupados de uma determinada forma, pode usar uma classe para indicar que todos tem algo em comum. Evidentemente que isso só faz sentido se precisa definir estilos e executar ações que devem ser executados em todos os elementos da classe.
Isso é mais útil para definir CSS para um grupo. Em alguns casos para o uso no JS. Em boa parte dos casos o id
é mais útil para o JS já que ele costuma trabalhar mais com elementos individualizados.
Você deve se perguntar se existe algum motivo para que determinados elementos na página tenham o mesmo comportamento/estilo.
De fato não tem sentido criar uma classe só por criar. Não faz sentido, por exemplo, criar uma classe igual ao id
, como frequentemente é feito sem pensar. O que algumas pessoas recomendam é até criar uma classe que seja única na página, mas aí não crie um id
igual. Outros preferem que o id
seja usado neste caso para garantir que ele será único.
Uma classe pode ser usada em vários elementos e é possível ter várias classes em um mesmo elemento. Ela funciona como uma etiqueta de classificação (mais ou menos com as tags que temos aqui, em fóruns, blogs, etc.).
Evidentemente pode-se criar a classe no elemento do HTML sem uso imediato para fornecer uma forma que outro desenvolvedor possa personalizar como quiser.
No exemplo mostrado realmente não estou vendo um motivo claro para criar uma classe, mas poderia ser necessário se tivesse mais contexto.
Não use onde é redundante. Por exemplo:
<div class="materia"> //aqui pode ser útil, depende do contexto
<h2 class="titulomateria"> //desnecessário aqui
Coloquei no GitHub para referência futura.
No CSS basta usar .materia h2
, não precisa de nome algum.
Se não conseguir justificar porque está usando, não use. Obviamente que a justificativa precisa ser coerente, não pode ser inventada.
Não há um regra definida, não existe uma forma de dizer que está certo ou errado usar sem o caso concreto bem contextualizado, cabe o bom senso. O contexto deve definir a necessidade.
Isso pode ajudar.