Hey guys, I put together a small tutorial outlining the differences between an ID selector and a class selector. I can remember when I was just starting out and asking this one myself... And I know that I wasn't alone. Anyway, just wondering what your thoughts are and wanted to make sure that I didn't miss anything. Let me know what you think. It's available at: Class And ID In CSS - What’s The Difference? Enjoy!
An ID is supposed to be unique and only appear once on a page but a class is able to be used multiple times on a page. ID's can be used for many other things such as programming to access a certain tag where as with a class as it is not designed to be unique you can use it to apply the same style to everything using that class. You can have an ID and class on the same tag, infact you can put multiple classes on one tag if you really wanted.
I think your article lays it out pretty well. If someone went in not knowing, they should know afterwards. I would recommend you talk further about the class vs. id usage. Someone may ask, "Ok, I understand that ID's can only be used once, so does that mean if I know for certain an element will only appear once on a page, should I force it to use an ID?" If folks don't come up with a clear plan on when they're using ID's and when they're using classes, their CSS files can become inconsistent and problematic. I think there should be more discussion regarding how ID's have a greater "weight" than classes. You may also want to discuss how IE6 chokes on multiple classes on an element. This article discusses it: http://www.ryanbrill.com/archives/multiple-classes-in-ie I've learned about the above the hard way, and found IE6 so problematic when chaining classes that I abandoned it altogether.
Excellent, excellent ideas. I had no idea about IE6 and the multiple classes issue - I have never even tried to code for IE6, I gave up before I even got started. Thanks for the link, it was an interesting read. You also raise a great point about planning ahead before attempting any design work. Without a proper plan in place it's quite easy to end up with spaghetti code.
Nice article, I usually give an ID to anything with higher importance, typically just the layout DIV's header footer content menu, and maybe if i need to use it for scripting!