w3c validation - id vs. class for css 2

[Vormav]

Hey. I'm working on a simple site that makes use of a lot of CSS and Javascript. The main problem I'm dealing with right now is getting it validated. This is for a class, and the w3c validation seems to be the most important thing to our professor.
But I'm of course running into a problem. I have a lot of buttons on my page that I've defined mouseover and mouseevents for having the buttons change styles. EX:
<input type="button" id="button-out" onMouseOver="this.id='button-over';" onMouseOut="this.id='button-out';">

Now here's the problem: When I run this thing through the W3C validator, it yells at me every time I have multiple instances of an id. So if I used two buttons with the same settings as above, it would complain. They suggest that in such cases as this, I define the styles with classes instead of ids. However, from my past experience with Javascript, if I use class definitions instead of IDs, then I can no longer use that simple id="" method for my mouse events.
And sure, I could just make new ID sets for every single button, but that would leave me with a pretty ridiculously large and unmanageable CSS file.

So in cases like this, should I just ignore the validation?

 

[philote]

If your professor wants it to validate, then you should find another way around the problem. I don't want to give you too many specifics because it's not my assignment, but look into how javascript can change styles directly.

 

[Vragabond]

Change ids to classes. For what you are using them, you don't need ids:

<input type="button" class="button-out" onmouseover="this.className='button-over';" onmouseout="this.className='button-out';" />

That should validate in xhtml 1.1

 

[OsakaWebbie]

Now that you seem to have answered Vormav's question (it would have been kind of him to respond, award stars, etc., but...), I'd like to jump in with a more theoretical question on the same topic (the topic title made me think the answer might already be here).

Is there a rule-of-thumb about when it's best to use id and when to use class? Up to now I have just tended to use whichever one was used in example code I find that most matches what I'm trying to do, but as I get into CSS more and more, it seems that in most cases either one works (I don't need to please any professor, but I do want to write good code). So is there a difference under the hood about how stuff works that would be useful to know when choosing coding strategies?

 

[Vragabond]

Hmmmm, not really. Two things you should know:
1. Only one unique id is allowed per page. That means whenver you want to have a style for more than one element, use class.
2. Classes cannot be accessed directly by Javascript scripts. If you need to reference an element in JS, use id.

Other than that, you're on your own. People like to use ids for structural purposes of their website: defining regions such as headers, columns, footers. Classes are mostly used for text styling purposes. But basically you only need to consider the top two rules. I personally like to put the main page structure in ids and most of the rest in classes. I also use descendant selector a lot (#main p -- meaning every p in #main element).

 

[OsakaWebbie]

Thanks, Vragabond, that's useful info.

 

[Vormav]

Bleh. Sorry, been busy.
But thanks Vragabond. I had looked around before, and hadn't found any usage of 'this.className' in any of my searches. But that does work perfectly. Everything is validating now.
I'd be curious to see if using multiple instances of the same ID actually has any impact on whether or not a page will run, or whether it's just something that WC3 doesn't like. Because in all the times that I've used the same ID multiple times, things have still worked out just fine. :shrug:

 

[Vragabond]

It's not that it doesn't work but id is used as a unique identifier of the element and as such should be used for one element only. If you are using JS to reference an element on the page, having multiple ids with the same name will make your script not work as expected. Hope it makes sense.

 

[Foamcow]

Think about it like this:

An ID, as a means of identifying an element must be unique. It is solely for telling one element apart from all the others in a document. As such you can reference that element and do things to it, such as apply a style via CSS.

A class on the other hand allows us to define a collection of style rules and apply them in one fell swoop to whatever arbitrary elements we like.

As such a class is almost the reverse of an ID as a Class lets us identify the group of styles, whereas an ID lets us identify an Element.

http://www.foamcow.com

- Web design and ranting

http://www.toccoagames.com

- Day of Defeat gaming community
"I'm making time

 

[jstreich]

I'd be curious to see if using multiple instances of the same ID actually has any impact on whether or not a page will run, or whether it's just something that WC3 doesn't like. Because in all the times that I've used the same ID multiple times, things have still worked out just fine. :shrug:

Browsers are broken, w3c is the standard, not the other way arround. Browser allowed "illegal code" to run, and so there are a lot of things that work in one browser and don't in another... Some of these are things companies added so you had to use their browser to see this cool thing -- other are just lazy people writing sloppy Markup. Just because it works on one machine, one browser, one resolution doesn't mean it works. The standards and XHTML are there to stop and reverse (or at least slow) the mess that profeteering companies and bad designers made.

The reason that "things work out just fine" is because most people used to think that if their page didn't show up it must be the browser's fault -- so browsers fudged the rules for little mistakes. Because browsers were fixing small mistakes everyone figgured "the browser will take care of it" and wrote worse code... w3c is the savoir of the mess on the net -- and as XHTML becomes more popular expect more things to stop working.