[SOLVED] "Don't use IDs in the Selectors." Why The Warning Message?

I agree it’s confusing to have these warnings. The reason is that the code entry box uses something called CSS Lint for its warnings. And some of the warnings are a bit controversial. And in this case, confusing seeing as the provided example code and often correct solution is marked up with a warning!

See this blog post - http://2002-2012.mattwilcox.net/archive/entry/id/1054/.

Here’s the section in which he talks about the ID warning:

Don’t use IDs in selectors

Absolutely the most wrong advice I have ever heard in my life with regard to how to author CSS. ID’s are extremely useful and you absolutely should use them. They are the fastest way a browser can select a given element. They are useful for in-page anchoring and if they’re already there in the markup then use them as style hooks. They are also, oddly enough, perfectly correct to use as long as they’re only ever one instance of that ID on any given page.

In other words, I reckon it would be good if CodeAcademy modified some of the CSS Lint config settings to turn off some of the dafter warnings, especially those which directly contradict the examples.

I think I can explain this better with an example. If I was editing my css code, and I wanted all of my paragraphs in the file to be red, I would go into the editor and type:

p { color:red }

Now, say I wanted all but one paragraph to be red, but I didn’t want to go back and class all of the other paragraphs. I could use an ID to override the previous value for the paragraphs and edit the individual ID instead of having to go back and class all of the other paragraphs. EXAMPLE:

p { color:red }

/* Now pretend you set one

to have an id of “space” */

#space { color: purple /* I used purple for example */ }

I hope this explanation helped!

Thanks for the answers. You learn something new everyday! (Didn’t know that codecademy uses CSS Lint for error checking. It would be nice for n00bs like me who are practicing, sans the arbitrary rules.) I found out more about CSS Lint (http://csslint.net/). Thread is marked as “solved”! :)