Entendendo os Conflitos de Classes – Hand Talk

Conflitos de Classes CSS

Um conflito de classe ocorre quando uma declaração CSS é atribuída a um elemento HTML sem o uso de classes, afetando a todos os elementos da página com as características atribuída.

O exemplo abaixo apresenta um conflito onde foram atribuídas características ao elemento <button>, observe que essas características acabam sendo validas para todos os elementos button da página, incluindo os botões do Hand Talk Plugin.

Exemplo de maneira incorreta:

//HTML
<html>
  <body>
    <button>Enviar</button>
  </body>
</html>

//CSS
<style>
button {
  padding: 30px;
  background-color: red;
}
</style>

No exemplo acima realizamos declarações para o elemento button sem o uso de classes. Atribuindo declarações diretamente a elementos, estas se aplicam a todos os elementos do mesmo tipo. Quando definimos que todos os botões vão ter a borda interna padding de 30 pixels e cor de fundo background-color, vermelha, podemos considerar que o estilo será aplicado inclusive aos botões do Hand Talk Plugin.

Exemplo de maneira correta:

//HTML
<html>
  <body>
    <button class="exampleClass">Enviar</button>
  </body>
</html>

//CSS
<style>
.exampleClass {
  padding: 30px;
  background-color: red;
}
</style>

No exemplo acima definimos uma classe (exampleClass) especifica para elemento <button> tendo o tamanho (padding) de 30pixels e cor de fundo vermelha (background-color). Observe que ao criar a classe específica é possível atribuir características a determinado elemento, evitando que essas sejam aplicadas também a outros itens da página como, por exemplo, os botões do plugin.

Ao atribuir as declarações de estilo CSS ao elemento através do uso de uma classe você garante que essas declarações só serão aplicadas nos itens pertencentes a essa classe, evitando que essas declarações sejam aplicadas a outros contextos resultando em conflitos de classe.