DEV Community

loading...
Cover image for Do you still use IDs for unique elements?

Do you still use IDs for unique elements?

madza profile image Madza ・1 min read

With the rise of styling libraries and mixed CSS in JS solutions, I've seen increased use of classes, while ID selectors are nearly extinct.

Even when understanding the code structure/context and noticing that the element is clearly unique and used once throughout the whole app, it's often still given a class to access via CSS.

Do you still use ID attributes for unique elements?

Discussion (30)

pic
Editor guide
Collapse
yoursunny profile image
Junxiao Shi

You can't avoid id in this case:

<label for="f_name">name</label>
<input id="f_name">
Enter fullscreen mode Exit fullscreen mode

(yes I know that id isn't needed if input is inside label, but this may not be feasible if there are other elements in between)

Collapse
patarapolw profile image
Collapse
alohci profile image
Nicholas Stimpson

No, the for attribute cross-references only to the id attribute. This is most important for radio buttons and check-boxes where multiple input elements share a common name to belong to the same group but each needs to be labelled differently.

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Classes should identify, well, classes while unique elements should be identified by IDs. The problem is that elements can be "unique" in a certain context, like an SVG graphic, but that whole context might appear repeatedly in a document. An easy way to deal with this is to just use classes instead of IDs.

Over-use of classes seems to be a general problem with "modern CSS" though. Programmers don't want to bother understanding CSS properly so they default to sticking labels on elements, which is closer to the sort of thinking you use when writing program code.

Personally, I prefer the third alternative: Prefer describing over naming, that is, use neither class- nor id-selectors whenever possible.

Collapse
urielbitton profile image
Uriel Bitton

So use what? just tag names and pseudo-selectors? It makes it much harder though

Collapse
darkwiiplayer profile image
DarkWiiPlayer

Did I say you shouldn't ever use class- and id-selectors?

Most CSS I see has things like .some-wrapper-class and then .some-wrapper-class-child. My point is that you should write .come-wrapper-class>* instead, which is both more readable and more maintainable.

I'm not against naming. I'm just saying if you can, you should prefer describing.

Thread Thread
urielbitton profile image
Uriel Bitton
  • operation is a very costly operation in terms of performance, so i would refrain from using it. ALso its not very friendly, what if you want to target only certain children? I dont agree with this approach at all. I think naming is very good and not going away any time soon.
Thread Thread
darkwiiplayer profile image
DarkWiiPlayer • Edited

Found a nice article that confirms what you said. The best part is the conclusion:

Is all this really necessary? — The short answer is; probably not.

Or, to throw a very well-known quote at the wall

We should forget about small efficiencies, say about 97% of the time: premature optimisation is the root of all evil. Yet we should not pass up our opportunities in that critical 3%.

We live in 2020. Browsers have magnificent benchmark tools that can help us find bottlenecks, and yes, of course we should give up good style if we can significantly improve performance. But that doesn't make it a good "default style" to start coding.

When I write some code to handle data I don't do manual CSE or Loop Fusion either, because it creates an unreadable mess. When a bit of hot code runs too slow, I then optimise it. Same with CSS, except I don't usually even write nearly enough CSS for it to start slowing down a site.

Collapse
patarapolw profile image
Pacharapol Withayasakpunt

Markdown parser generates id, so that it can used for anchors, I think. With a certain markdown-it plugin, you can make a clickable as well.

Like #unique-id means that you can go to from

<a href="#unique-id">Link</a>

<h2 id="unique-id">Come here</h2>
Enter fullscreen mode Exit fullscreen mode
Collapse
alohci profile image
Nicholas Stimpson

There are, at my last count, 11 different uses of id attributes in HTML, only one of which is their use in CSS selectors. The other 10 require the id to identify a single element within the document.

For CSS selectors, omitting using id selectors when appropriate to do so, means missing out on some of the power that specificity brings to you.

Collapse
keogami profile image
keogami

Examples please

Collapse
darkwiiplayer profile image
DarkWiiPlayer
  • The already mentioned ID-Selector
  • Fragment Identifiers in URLs
  • Input-Label matching
  • Chrome creates a variable for each element with an ID for easier debugging
  • document.getElementById

to name a few

Collapse
promikecoder2020 profile image
ProMikeCoder2020

I think I'd has two main usecases:
-The label for attribute

Collapse
urielbitton profile image
Uriel Bitton

yes and a few more actually

Collapse
promikecoder2020 profile image
ProMikeCoder2020

Could you elaborate?

Collapse
hentaichan profile image
ヘンタイちゃん

I sometimes still do that, e.g. a logo that appears on a navbar is often unique, or the headers in section for a blog post (so that a user can link to specific parts rather than the whole document similar to what MSDN does) If you look at websites created by MS you'll notice that they also still use IDs for styling elements that are guaranteed to be unique.

Collapse
joeljuca profile image
Joel Jucá

Obviously. IDs are for element identification, which means uniqueness. Classes are for, well, classes of elements. Querying the entire DOM for an element through classes when you can simply use IDs is a waste of time and resources. Just use IDs when you need to target one very specific element; otherwise, when targeting a class of elements, use classes (the names are so self-descriptive, why is it still being discussed?).

Collapse
webbureaucrat profile image
webbureaucrat • Edited

I consider styling with CSS classes to be a best practice. Even if I am styling a unique element, I don't use ids because I want to leave my markup open to extension and can't guarantee that I will never need an element like that again.

Collapse
codefinity profile image
Manav Misra

Sometimes. Generally, I like id for 'hooking' with JS - if it's really just one thing. Case and point, React is using "#app".

Collapse
urielbitton profile image
Uriel Bitton

Its ironic but the more classes become popular the more ids become powerful.
Meaning if a CSS framework is based entirely on classes then overriding a style for a certain element without headache is as simple as giving it an id, since id's have priority over classes.

Collapse
thekooldev1232 profile image
thedev1232

Yep I do 😂

Collapse
madza profile image
Madza Author

Haha, I do, too 😄😄

Collapse
avi_siboni profile image
avi siboni

I'm trying to avoid as much as possible, since eventually it's becomes to a variable on window...

Collapse
dailydevtips1 profile image
Chris Bongers

Yeah in certain cases for sure:

  • scrollable links
  • input fields
  • I sometimes use them for javascript selector because getDocumentById is so cool
Collapse
urielbitton profile image
Uriel Bitton

document.querySelector('.myclass') is even cooler :P

Collapse
kibblewhite profile image
kibblewhite • Edited

Yes totally "still" using IDs.
The way this question is presented feels like we should stop using the ID attribute? Does anyone else feel that too?

Collapse
jmau111 profile image
Julien Maury

yes, it's still a pretty good practice for selecting DOM elements with JavaScript.

It's also great in a "pure" CSS perspective.

Collapse
galoisgirl profile image
Anna

It depends. When there just happens to be one top menu, class is safer. When it has to be id for some reason, id it is.

Collapse
cerchie profile image
Lucia Cerchie

Why would we use a class for a unique element?

Collapse
aniketd4x profile image