This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Alfred Toribio
over 11 years

Don't use IDs in selectors

Hi, I was just trying IDs on the CSS tab and I noticed that a little warning sign appeared “Don’t use IDs in selectors”

Why does the CSS tap recomend me not to use IDs in selectors?. Is there something wrong about them? (the selector seems to work perfectly).

Answer 50b3d3435f144920af000c0c

35 votes

Permalink

The warnings you see are produced by a tool called CSSLint, which checks your stylesheet for compliance with these rules. They aim at making your CSS better, but they’re not uncontroversial. See, for instance, this article for criticism of CSSLint’s rules – and this counter-argument, which defends the “don’t use IDs in selectors” recommendation.

Ultimately with growing knowledge and experience every developer is entitled to their own opinion, but personally I think it’s a good idea for beginners to have a look at the linter’s warnings once in a while.

points
Submitted by Alex J
over 11 years

7 comments

Peahen Amonglox over 11 years

@Alex J: That makes sense, but your explanation should be part of any exercise where warnings can appear (if only as a footnote) - so as to avoid confusion. Users shouldn’t have to search the forums to discover this information.

Dave over 11 years

I agree here. I’ve noticed this warning popping up in the CSS tool for a while now (I’ve been working sequentially through the web fundamentals course), but it was only once I hit this lesson that I went looking for answers. A footnote of some sort earlier in the course would be nice to answer any questions, or even something telling us it’s a function of the lint tool and to ignore it until later.

Sandra Torra about 11 years

Thanks Alex. I have noticed the warning when I did the practice. And I agree with Peahen Amonglox and Dave, this information would be on the course.

Elvira Lupşa almost 11 years

I just came to the forum to ask the exact same question, a footnote could be more than helpful, people who don’t care to read it won’t, but those like me who need to understand why this could be a problem would appreciate it. Thank you all for your answers.

Ron almost 11 years

Thanks to whomever stickied this discussion. I have been convinced to follow Lint’s advice. Thank you for the links, Alex J.

Blanca Caullieres over 10 years

Thank you for the information the link about the rules is just great!

董张帆 over 10 years

Thank you for information!

Answer 5180e5defbed9d11140018c2

5 votes

Permalink

On my first encounter with ‘classes’ and ‘id’s’ I always wondered what the point of ‘Id’s’ were. They could apparently only be used once per page but then some browsers didn’t follow this strictly. Why not just use ‘classes’ and just use them for one element on a page if needs be? CSSlint seems to agree with this adding that it is pretty handy to be able to re-use the class later if it comes to it (my paraphrase). Using ‘Id’s’ would seem to make reading the code a little easier though. Anyroad up. Thanks for including the CSSLint warnings. They are very educational. (and a tiny window into the turbulent world that is standards based web code)

points
Submitted by Dave Cockburn
almost 11 years

1 comments

recurvata almost 11 years

id’s are also used as targets for links, when you want to jump to a specific spot on a page, for example. They’re also used in Javascript, and maybe other languages as well.

Answer 52221629f10c60e6060017d5

0 votes

Permalink

Whoa! What a way to thicken the soup. The what …for the which…reflects the ? Yikes!

I think I will just stick with what we are working with and let the big boys figure it out while holding our hands.

Thanks for the insight, even tho’ it is painful.

points
Submitted by disberg
over 10 years

Answer 52d12c367c82caa43c00104e

-2 votes

Permalink

Teaching beginners bad practices is a bad ideas. Learning something bad just means you have to waste time later both correcting the bad habit and the energy spent changing the bad habit.

This doesn’t take an article to explain why ID’s are bad in CSS.

This course’s own pages say you use CSS so you don’t have to repeat code. (In computer terms you can call CSS library routines).

Then the course violates its own rules that by saying to use IDs in selectors!?!

IDs are UNIQUE. There is no way you would have your CSS code referring to more than one thing by using IDs in selectors. It’s just brain dead.

There is also some stupid stuff in the course telling people to use nested references (div > p {some css settings}or div div p {some css settings}. Once again defeating the point of CSS as a library routine handling all the layout issues. If your CSS depends on the layout of the HTML, why did you bother moving only SOME of the layout into a CSS file?

points
Submitted by ChiefCatHerder
about 10 years

3 comments

Joseph Baker about 10 years

CSS is not used so you don’t have to repeat code - it’s main intent is to separate document content from document separation. Ultimately, the side effects and bonuses of this include: improved content accessibility, allowing multiple pages to share the same features (not having to repeat code), etc…

Telling someone not to use ID’s is an umbrella suggestion and should be considered heavily based on your own personal design needs.

Ex. If you are going to have a unique “Client Login” button at the top of your page that does not match the style of other buttons on your site - us #ID.

If that button is something that is going to be used in more than one way, other than that one same spot at the top right of your page - us .Class.

Simple as that.

Joseph Baker about 10 years

Correction: it’s main intent is to separate document content from document *presentation.

AJ over 9 years

I only have one #wrapper. I only have one #hamburger. So why not use ID’s? It helps me organize. And after all, the argument is one about organization because your site will work with ID’s. Plus, when your CSS gets long, ID’s can help you target specifically what you’re looking for.