Doubt about class assignment and ids

Asked

Viewed 61 times

0

Is there any good practice that guides the order I should define the id and the class of an HTML element? I know it doesn’t matter what order the browser renders, but there is some code style guide for this?

html

  • This should answer, if not, I think there are others on the site that answers, several times the subject has been dealt with: https://answall.com/q/39875/101. See also https://answall.com/q/117922/101

  • Thank you, @Maniero.

  • 3

    Possible duplicate of What is the HTML priority? "id" or "class"?

  • 1

    @I don’t think it’s duplicate. This refers to the order to place attributes in the elements, while the one you quoted refers to the order of priority styles are applied. It’s strongly related, but I don’t think it’s duplicate.

2 answers

2


According to the documentation on that Mozilla Best Practice Guide, the ID must come after the class:

As classes are great reusable components, so they come first. The IDs are more specific and should be used sparingly (for example, for in-page bookmarks), so they come second.

<a class="..." id="..." data-toggle="modal" href="#">
    Example link
</a>

Source: https://codeguide.co/#css-shorthand

So basically Mozilla says that since the ID is more specific it should come last. But that’s not the rule, it’s their recommendation.

Already the Bootstrap for example, which is a Framewrok giant and super popular does not seem to have a padão, something strange to my view... For them the ID comes first in some components, and then in others...

For example, note that in the initial Carroussel tags the ID comes first, while on the Modal tag the Classe is that comes first, and the two are components of the same Framework.

Tag Start of Carousel https://getbootstrap.com.br/docs/4.1/components/carousel/:

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">

Initial tag of the Modal https://getbootstrap.com.br/docs/4.1/components/modal/:

<div class="modal fade" id="modalExemplo" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

I do not consider this a good practice, the ideal would be to adopt some rule to facilitate the maintenance and reading of the code.

Recommendation by Google: No recommendation :)

In the Google Style Guide that attribute order subject in the tag is not even mentioned... https://google.github.io/styleguide/htmlcssguide.html

  • 1

    Thanks, @hugocsl. I’m going to put my classes first, I also think it makes it easy to read the code to have a pattern. Strange that Bootstrap doesn’t have...

  • 1

    @Thiagokrempser strange even the BS did not follow a pattern... I went there precisely to see the pattern that they followed haha, but soon realized that it seems to have no pattern... I see in an FW so grid there should be a rule for this kind of thing...

0

In the CSS scenario, I recommend you make use of class when possible, since they are reusable, and make use of the ID sparingly, since they are unique and cannot be reused, losing much of the benefits of reusing the CSS in multiple locations.

Also when you start using selectors with ID, you are automatically limiting that style to a single element.

Be cautious when using Ids, in fact validating will be necessary. When we talk about manipulation of DOM elements, the ID is actually better recommended. If you are going to use it, do it only on specific and unique tags of your system to avoid conflicts.

Here’s a link to see the Mozilla specification for selectors by class or ID: https://developer.mozilla.org/en-US/docs/Web/CSS/Getting_Started/Seletores

ID manipulation in js: (https://www.w3schools.com/jsref/prop_html_id.asp)

  • 2

    But nobody talked about selectors. The recommendation not to use ID for selector makes some sense, but not in this context. In this, to speak the truth, was an invalid recommendation, because the ID has its function (important) in the DOM and should be evaluated within the appropriate need and context.

  • I adjusted my answer my friend. I observed only the common scenario of my day. I agree when manipulating the element of GIFT. Hugs.

Browser other questions tagged html

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