Avoid using IDS

after learning the difference between class and id selectors i was thinking of avoid using IDS because maybe i just found i need to style another element with the same id so i will have to change this id to a class to be able to use it in different elements .
so avoid using IDS to be safe is this a good practice or am i missing something ?

2 Likes

Hi there.

There should never be more than one element in an HTML document with any given id attribute. The id is meant to be a unique identifier for a specific, single element of the page.

This is supported by the HTML5 specification from the WHATWG.

https://html.spec.whatwg.org/multipage/dom.html#the-id-attribute

If you have several elements which need to share common styling, then yes you should use a class or element selector. :slight_smile:

1 Like

thank you for your replying but i think you didn’t understand me maybe because of my English…
i know the id is unique but i was asking isn’t that will be better if i just avoid using it in my HTML that’s because maybe in big projects say i made an id id = 'test' for element1 and then i found that i need to use the same style in element2 so to fix this i will need to change the id and make it a class class ='test' .

so why shouldn’t i avoid using IDS and only use classes even if i will need this class for one element because maybe i will change my mind later during the project.

There is no need to avoid using id, just so long as we understand the need for uniqueness. The attribute is quite special in a number of ways.

  • global identifier
  • fragment identifier
  • high specificity selector

The key is to have a purpose in mind. We don’t just pull things out of thin air but write everything with purpose. If the purpose is in the above list, then it fits with intended usage.

Aside

Avoid using white space in attributes. It makes for better readability.

class="test"

vs

class = "test"

The only white space should be in the separation of attributes.

<p class="test" title="Opening paragraph">

</p>
2 Likes

thank you for this great advice!


so
using a class for only one element
vs
using an id
isn’t both will have the same properties ?

1 Like

First rule of CSS is to use the lowest possible specificity. We only increase importance when there is a good reason. A class only indicates a selector rule. There is no harm in using it on one element for the purpose of styling, and no need for id just because there is only one element.

If we want in page navigation, then we write ids to identify the fragments. That way we can write links to move around the page.

<a href="#article1">Jump to Article One</a>

The fragment can even be reached from another page.

 <a href="/articles/index.html#article1">See Article One</a>

We’re using ID for one of its intended purposes. We can style with ID, though given the rule of thumb of low specificity, we are probably better off using CLASS.

2 Likes

really thank you for making this clear .

2 Likes