When should I use the class attribute in HTML elements?

Asked

Viewed 4,807 times

9

I myself feel irresponsible for using so many class at will, without limits, at any time in any situation, whether to make use of CSS, or for use with Javascript. So I ask myself: am I right or, in fact, the class has well-defined main purposes of use in specific situations for which it was created?

After all, when should I use the class attribute in HTML elements? When is it really important to use it? What is your main focus? When does the convention suggest its use? 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>
html
  • 4

    In a very brief way, I understand that you should simply use class when you really need to. In the given example, it makes no sense, as you can make html { color... directly. On the other hand, if the CSS is external and the site is configurable, using PHP or another language "server side", you change the HTML class according to the context, instead of changing the CSS dynamically. In short, it depends on the common sense allied to the context. The most important thing is to know that there is no general rule to say what is right or wrong.

2 answers

14


He is a grouping. 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 must be executed in all class elements.

This is most useful for defining CSS for a group. In some cases for use in JS. In most cases the id is more useful for JS since 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 makes no sense to create a class just by creating. It makes no sense, for example, to create a class equal to id, as is often done without thinking. What some people recommend is to even create a class that is unique on the page, but then do not create a id the same. Others prefer id be used in this case to ensure that it will be unique.

A class can be used in multiple elements and it is possible to have multiple classes in the same element. It acts as a classification label (more or less with the 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 wish.

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

Do not use where it is redundant. For example:

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

I put in the Github for future reference.

In CSS just use .materia h2, doesn’t need any name.

If you can’t justify why you’re using it, don’t use it. Obviously the justification needs to be coherent, it can’t be invented.

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

This can help.

  • 1

    Remember that id is a selector for specific elements and that it does not repeat in the code, because when you use a Document.getElementById it returns the first one you find. If an element has class and id, id attributes override those of the class.

  • @Carlinhos but Document.getElementById only compares the value with the value of the global attribute id, never of class, I’m sure?

  • 1

    @Ingridfarabulini Yes. What I meant is that if you repeat an id and use Document.getElementById it will return the first one you find, because the id cannot be repeated. And for CSS if you use id on an element with a class as well, id properties will overwrite the class.

4

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

In practice, let us take an example:

Here we set red color font for all tags <div>, that is, we apply in a global way a formatting for all elements <div>

div{
color:#FF0000;
}

In HTML, just write the tags without specifying the class attribute, because there is already a standard style directly related to the tag <div>:

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

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

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

<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 if it is "exhaustively" or "redundantly" used. At this point, comes the perception of who writes the codes. Basically think "less is more". When you realize you can reduce a code to achieve the same result, do.

Of course one should understand the context about "code reduction". Because not always a visually smaller code means to be more efficient. But at this point we enter into another subject, which does not fit to detail here.

Browser other questions tagged html

You are not signed in. Login or sign up in order to post.