Hacker News Reader

Comment by dfischer | Hacker News Reader

ID's are useful for unique element styling which will always be a case in a website. There's certain elements that are absolutely unique.

Goes hand-in-hand with javascript to ease selector targeting.

I never scope ID's either, that's the wrong way to do it. An ID is always unique so it is top-level.

View on HN

The problem with absolutely unique elements is that, in a complex enough website (that evolves over time), they often end up not being unique after all.

I agree about IDs for JavaScript though.

Exactly, as far as CSS is concerned an id is effectively equivalent to a class name except when it breaks things.

Ids should be used only for scripts, and most of the time should be auto generated anyway.

It is not equivalent in any sense. Let's not forget specificity.

If you're relying on weird specificity chains, then your CSS is likely an unmaintainable mess.

Leave IDs for uniquely identifying an element on a page because you need to access it from a script.

Treating them like "Extra Strong" class names is a maintenance nightmare.

"I agree about IDs for JavaScript though."

Would you mind elaborating on the JavaScript point? Is it for convenience with document.getElementById or something?

Using jQuery, I tend to prefer class selectors the same as in my CSS.

Jquery class selector is the slowest selector, avoid them as much as possible. ID selector is the fastest. So, if your application is jquery intense, better avoid css selectors.

in modern querySelector implementations (any real browser), class look-ups are just as fast as IDs.

There's less of a win in ajax from applying functionality on a class level - there aren't typically multiple selector boxes on the same page that all hit the same ajax callback.

ID is unique on the page. Website can have many pages. If there is a need to style some element of the page differently scoped IDs can be handy.

Another problem with IDs is that they make the "point system" in selectors much more complicated than if you only use classes and elements.

What about an ID for main page elements and things that never will change like #header or #footer or #sidebar?

Ideally for those you would use the html5 header, footer, and aside tags, respectively. You can use the html5 Javascript shim to enable support for those tags in IE.

sidebar is not equal aside, and you can have several headers footers on one page.

Reply on news.ycombinator.com