When should I use the class attribute in HTML elements?

He is a grouper. Whenever you have HTML elements that deserve to be grouped in a certain way, you can use a class to indicate that everyone has something in common. Of course this only makes sense if you need to define styles and perform actions that should be performed on all elements of the class.

This is most useful for setting CSS for a group. In some cases for use in JS. In most cases, id is most useful for JS because it usually works more with individualized elements.

You should ask yourself if there is any reason why certain elements on the page have the same behavior / style.

In fact, it does not make sense to create a class just by creating it. It does not make sense, for example, to create a class equal to id , as it is often done without thinking. What some people recommend is until you create a class that is unique on the page, but does not create a id equal there. Others prefer that id be used in this case to ensure that it will be unique.

A class can be used on multiple elements and it is possible to have multiple classes in one element. It works like a sort tag (sort of like tags that we have here, in forums, blogs, etc.).

Of course you can create the class in the HTML element without immediate use to provide a way that another developer can customize as you want.

In the example shown I'm really not seeing a clear reason for creating a class, but it might be necessary if I had more context.

Do not use where redundant. For example:

<div class="materia"> //aqui pode ser útil, depende do contexto
    <h2 class="titulomateria"> //desnecessário aqui

In CSS just use .materia h2 , do not need any name.

If you can not justify why you are using it, do not use it. Obviously the justification must be coherent, it can not be invented.

There is no defined rule, there is no way to say that it is right or wrong to use it without the well-placed concrete case. It is common sense. The context should define the need.

This can help .

In short, the class attribute is useful when you need to modify the style of an element, and those styles will also be useful for other elements, without necessarily modifying styles globally, applying them all.

In practice, let's look at an example:

Here we define red color font for all <div> tags, that is, we globally apply a formatting for all elements <div>

div{
color:#FF0000;
}

In HTML, just write the tags without needing to specify the class attribute, since there is already a default style directly related to the tag <div >:

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

Suppose you need to modify the style of a particular element, and this style will not be used globally by all elements. But only for 1 or a few elements.

Then this would be a case of using the class or even css inline attribute:

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

The CSS style

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

Or

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

Nothing prevents us from defining a class attribute even though it is "exhaustively" or "redundantly" used. At this point comes the perception of who writes the codes. Basically think of "less is more". When you realize that you can reduce a code to get the same result, do it.

Of course you should understand the context about "code reduction". For not always a visually smaller code means to be more efficient. But at this point we enter into another subject, which is not going to be detailed here.