Css: Why not use ID, another reason than tightly coupled

Question

I have a page where there's a tag with an id, but a normal css class, like this one:

<div id='stack_overflow_example' class='title'> ... </div>

As everybody knows, this id have to be unique on that page, and I'm using it only to easily find it under css (could be used for ajax requests, for example, but this is not the case).

Reading about css locators (selectors), I found that I should not use IDs as css selectors, because this would tightly couple my css code with my html code.

Alright, I agree. But the option is to put a unique css class on that tag, and then use it on css code.

Why this option is not as tightly coupled as the first one?

Could anybody give any other reason than what I just thought: "Because on this second option, you can reuse the 'unique' css on other 'unique' tags too."

EDITED: Thinking about performance reason, my friend just thought (and I agreed):

• Using 'id' tag, the 'search' would go through all html code until find first use of the id, and then stop, because 'id' is unique
• Using 'unique class', the 'search' would go through all html code until EOF, because many elements could have that 'unique class'

Isn't it, on the end of the edge, a performance glitch making option 1 sound better?

Answer 1

You can apply one unique ID to any one element in each page. It doesn't matter which element has the ID as long as only one has it per page. There is no such rule for classes. Hence the coupling issues you're referring to (i.e. the CSS has a very rigid assumption that the element with a certain ID serves the same presentation and purpose across any HTML pages it's applied to).

Honestly I wouldn't really care about coupling (EDIT: or performance) issues so much. If I have an ID and I wish to apply styles only to that ID, I select by that ID. If the element shares that class with other elements and I want to apply styles to all elements with that class, I select by that class.