+ 2

Use of classes instead of ID in HTML

i was wondering why people keep using classes instead of id for every single element in the page. i mean, even the classes that are used for one single element(one time) are classes and not ids. it seems to kind of contradict the purpose of id and class. like pages have sections that have classes named that section topic, even though each section is unique and only once in the document(and therefore so is the classname for it). also, what if they need the id later? imagine that they are creating "table of contents" bar at top of page where they create anchor tags to go to each section. what then? they can't link the sections since they used classes everywhere, not id. are they going to now manually add id to every section and elements they want to create anchor links to? and if that IS the case, what are they gonna name it? the same as the class names?

html css classes

22nd Apr 2025, 8:46 AM

Ace

5 ответов

+ 8

in css, it's makes more sense to use classes than rather than ids, since you can apply and share it to more than one element, and you can nest and inherit the classes. if you used id in your css, you cannot override it with classes. the scope is too specific. I usually use id if I want to find it with javascript. generally I use: classes for css ids for javascript there's even this: https://github.com/eslint/css/issues/19

22nd Apr 2025, 9:41 AM

Bob_Li

+ 7

It's really a good question, according to my observations I think it's upto people how and what they use but if we talk about why exactly class? The answer is one of the major cause that's "classes can be reused."=> Styling multiple elements becomes easier IDs can be used for styling but it can become harder to manage it with rules cause they are meant to be unique so inner elements can contradict the styling. Now, you mentioned what if they need IDs so obviously we can go back to using IDs and in that case we often use id similar to classes Basically IDs are to be for identification while classes are like grouping similar elements for same styling or maybe anything. So people generally consider classes first then IDs. But at last it still comes to preference of user.

22nd Apr 2025, 9:49 AM

Binx

+ 6

Following Bob_Li and Snehil Pandey, It is useful in JavaScript too. You might want to select and do a specific action with elements of a specific class, you can do that with document.querySelectorAll(".class-name"). If you had used ID for the elements, you'll have to do this for every one of those elements. Using this, you can do many things like: Changing style of multiple elements with a class(often used for hiding elements): const items = document.querySelectorAll('.item'); items.forEach(item => { item.style.color = 'blue'; }); Adding event listener for all buttons: document.querySelectorAll('.button').forEach(btn => { btn.addEventListener('click', () => { console.log('Button clicked'); }); }); And more

22nd Apr 2025, 1:42 PM

Afnan Irtesum Chowdhury

Yeah, I’ve noticed that too! Sometimes it feels like using a class for a single section is a bit much, but I guess it makes things easier if you ever want to reuse styles or stay consistent with naming. I usually just go with whatever keeps things organized for me.

23rd Apr 2025, 3:34 PM

Karl

CSS specificity https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascade/Specificity. This is a "score" calculated for each CSS selector, and when multiple are competing to style the same element the one with the highest score wins, or the last one defined in the stylesheet(s) if there's a tie. It does go deeper, but this is the simple gist of it.

27th Apr 2025, 8:33 AM

Tom Shaver