Why should I use ID instead of Class

HTML-CSS
1

I know that Class and ID are different in the sense that a unique ID can only be used once per element, and that Classes can be shared with elements, but why else would I need to use ID, what’s the point of using an ID instead of just making a unique Class and only use it like I would use an ID?

example:

<element
id="title"
class="element"
/>

<element
id="paragraph"
class="element"
/>

But wouldn’t the following serve the same exact purpose?

<element
class="title"
class="element"
/>

<element
class="paragraph"
class="element"
/>

Is there something I’m missing, does ID have other properties outside of being an identifier?

2

Welcome to FFC forum.

While it’s true that you can achieve uniqueness with a class by only using it once per element, there are specific reasons to use IDs:

  1. JavaScript Access: IDs are commonly used as hooks for JavaScript functionality. They provide a quick and direct way to access and manipulate specific elements in the DOM.

  2. CSS Specificity: IDs have a higher specificity than classes. This means that CSS rules targeting an ID will override rules targeting a class, which can be useful for applying unique styling or overriding general styles.

  3. Fragment Identifiers: IDs are often used in URLs as fragment identifiers to link directly to specific sections of a webpage.

  4. Semantic Meaning: IDs are typically used to identify unique elements that hold particular significance within the document structure. Using IDs can convey semantic meaning and aid in understanding the purpose of specific elements.

Overall, while you can technically achieve uniqueness with classes, IDs offer additional benefits in terms of JavaScript access, CSS specificity, semantic meaning, and URL fragment identifiers.

1 Like
3

I see, thank you for your help!

1 Like
4

You welcome. Happy Coding!

5

I’ll add one more reason to this list.

  1. Accessibility: ID’s are often required in order to make components accessible, particularly for screen reader users. For example, a simple disclosure button that toggles the visibility of content (such as a hamburger menu button) requires an ID on the menu, and uses the aria-expanded attribute on the button to point to that ID. This is required for accessibility.
2 Likes
6

Hello, IDs are typically used for elements that are meant to be unique, such as a header or a main content area. While you can technically use classes for unique identification, it’s considered best practice to reserve IDs for elements that should only appear once on a page. This helps maintain clarity in your code and can be useful for JavaScript interactions where you specifically target a unique element. In contrast, classes are meant for styling multiple elements that share common characteristics. So, while your alternative approach with unique classes might work, using IDs is a clearer and more conventional way to uniquely identify and target specific elements.

7

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.