Understanding Class Conflicts

About CSS Class Conflicts

A class conflict occurs when a CSS declaration is assigned to an HTML element without the use of classes, affecting all elements on the page with the assigned characteristics.

Below is an example of a class conflict where the developer assigned characteristics to the <button> element. Notice that these characteristics apply to all button elements on the page, including buttons in the Hand Talk Plugin.

Incorrect Example:

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

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

In the example above, declarations are made for the button element without using classes. Notice that assigning declarations this way applies them to all <button> elements on the page. For example, all buttons will have a size (padding) of 30 pixels and a red background color, including buttons from any other external script.

Correct Example:
 

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

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

In the example above, we define a specific class (exampleClass) for the <button> element, with a size (padding) of 30 pixels and a red background color. By creating a specific class, it's possible to assign characteristics to a particular element, preventing these characteristics from being applied to other items on the page, such as plugin buttons.

Assigning CSS style declarations to an element using a class ensures that these declarations are only applied to items belonging to that class, avoiding the application of these declarations in other contexts and resulting in class conflicts.