9

Eu mesma me sinto irresponsável por usar tantos class à vontade, sem limites, a qualquer momento em qualquer situação, seja para fazer uso de CSS, seja para uso com JavaScript. Então me pergunto: será que assim estou certa ou, na verdade, o class possui sim objetivos principais bem definidos de uso em situações específicas para o qual ele foi criado?

Afinal, quando devo usar o atributo class nos elementos HTML? Quando realmente é importante seu uso? Qual é seu principal foco? Quando a convenção sugere sua utilização? Ufa! :)

<html class="layout">
   <head>
      <title>Atributo class até na tag html</title>
      <style>
         .layout {
            color      : orange;
            font-style : italic;
         }
      </style>
   </head>
   <p>Este texto está formatado pelo uso do atributo class na tag html.</p>
   <p>Outro texto formatado pelo uso do atributo class na tag html!</p>
</html>
1
  • 4
    De maneira bem resumida, eu entendo que simplesmente você deve usar class quando precisar de fato. No exemplo dado, não faz sentido, pois você pode fazer html { color... diretamente. Por outro lado, se o CSS é externo e o site é configurável, usando PHP ou outra linguagem "server side", você troca o class do HTML conforme o contexto, em vez de ficar mudando o CSS dinamicamente. Em resumo, depende do bom senso aliado ao contexto. O mais importante é saber que não existe uma regra geral pra dizer o que é certo ou errado.
    – Largato
    13/03/2016 às 23:39

2 Respostas 2

14

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.

3
  • 1
    Vale lembrar que o id é um seletor para elementos específicos e que não se repetem no código, pois quando se usa um document.getElementById ele retorna o primeiro que achar. Caso um elemento tenha classe e id, os atributos do id sobrepõem os da classe.
    – Carlinhos
    14/03/2016 às 17:31
  • @Carlinhos mas o document.getElementById só compara o valor informado com o valor do atributo global id, jamais de class, estou certa? 14/03/2016 às 22:29
  • 1
    @IngridFarabulini Sim. O que eu quis dizer é que se você repetir um id e usar o document.getElementById ele retornará o primeiro que achar, pois o id não pode ser repetido. E para o CSS se você usar id em um elemento com uma class também, as propriedades do id vão sobrescrever a class.
    – Carlinhos
    15/03/2016 às 11:22
4

Resumindo, o atributo class é útil quando precisa modificar o estilo de um elemento e esses estilos serão também úteis para outros elementos, sem necessariamente modificar os estilos de forma global, aplicando a todos.

Na prática, vejamos um exemplo:

Aqui definimos fonte de cor vermelha para todas as tags <div>, ou seja, aplicamos de forma global uma formatação para todos os elementos <div>

div{
color:#FF0000;
}

No HTML, basta escrever as tags sem necessidade de especificar o atributo class, pois já existe um estilo padrão relacionado diretamente a tag <div>:

<div>foo</div> outra <div>bar</div>

Suponha que necessite modificar o estilo de um elemento específico e esse estilo não será usado globalmente por todos elementos. Mas apenas para 1 ou alguns elementos.

Então esse seria um caso de uso do atributo class ou até mesmo de css inline:

<div class="foo">foo</div>
<div class="foo">foo2</div>
<div class="foo">foo3</div>
<div style="background-color:#cccccc;">bar</div>

O estilo CSS

/*
Dessa forma será aplicado a quaisquer elementos com o atributo class="foo".
*/
.foo{
background-color:#05bbcc;
}

Ou

/*
Dessa forma será aplicado somente a elementos <div> com o atributo class="foo".
*/
div.foo{
background-color:#05bbcc;
}

Nada nos impede de definir um atributo class mesmo que seja "exaustivamente" ou "redundantemente" usado. Nesse ponto, entra a percepção de quem escreve os códigos. Basicamente pense em "menos é mais". Quando perceber que pode reduzir um código para chegar num mesmo resultado, faça.

Claro que deve-se entender o contexto sobre a "redução de código". Pois nem sempre um código visualmente menor significa ser mais eficiente. Mas nesse ponto entramos num outro assunto, o qual não cabe detalhar aqui.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .