Id powinno być unikalne w całym dokumencie. Jednak wiele rzeczy wydaje się unikalne, a wcale takie nie jest.
Wyobraź sobie taki scenariusz. Robisz stronę, na stronie umieszczasz jakiś widżet, np. carousel, przypisujesz mu id carousel, i za pomocą tego id odwołujesz się do tego elementu wszędzie, w CSS:
#carousel {
padding: 10px 10px;
...
}
...
#carousel {
...
}
w JS:
$("#carousel .slide-change").click(function () {
...
};
setInterval(function () {
$("#carousel .....").changeSlide(); // taki tam pół-pseudo-kod ;)
});
itp. itd.
No i spoko, działa.
A teraz niespodzianka. Okazuje się, że chcesz na stronie umieścić drugi taki sam widżet carousela, tylko na dole strony. I wszystko musisz pozmieniać (bo używając id zakładałeś że carousel będzie jeden).
A jakbyś pisał od początku tak
.carousel {
...
}
czy tak:
$(".carousel .slide-change").click(function () {
});
miałbyś łatwiejsze zadanie....
Z drugiej strony id czasem są niezbędne jeśli np. chcemy zidentyfikować jakiś element po to, żeby dało się na niego wejść przez adres z hashem na końcu, np. w kodzie strony wikipedii masz:
<span class="mw-headline" id="External_links">External links
</span></h2>
dzięki temu adres:
http://en.wikipedia.org/wiki/Cat#External_links (z #External_links na końcu) przenosi się od razu na dół strony do zewnętrznych linków. Albo też id się przydają jak chcemy jakiś element jednoznacznie zidentyfikować w skryptach (np. robimy portfolio i chcemy pokazywać kontakt do nas w animowanym okienku dialogowym. Więc tworzymy ukryty element o id #kontakt, i jak klikamy button z napisem "Kontakt" to wywołuje on np. taki kod
$("#kontakt").show();
i pokazuje się to, bardzo konkretne okienko z danymi kontaktowymi,.
W takich sytuacjach używanie id MA sens, bo identyfikujesz bardzo konkretne okienko na stronie, które chcesz pokazać. Z drugiej strony nawet do takiego okienka prędzej bym dodał jakąś klasę (na przykład klasę "dialog") a potem stylował np.
.dialog {
font-size: 12px;
}
bo jednak - jaką mam pewność, że za chwilę nie będę potrzebował innego, podobnego okienka "O mnie"? Takie rzeczy lubią się same "mnożyć"...
Tak samo sam przycisk z napisem "Kontakt". Mógłbym go nazwać #contact-button, ale co jeśli będę chciał mieć 2 przyciski/linki na stronie, które do tego samego służą?
więc klasa, albo dodanie jakiegoś atrybutu (np. <a class="dynamic-link" href="#contact">kontakt</a> czy coś podobnego. A potem np.
$(".dynamic-link").click(function () {
var id = $(this).attr('href');
$(id).show();
});
Myślę, że to kwestia żeby odróżnić elementy/rzeczy/zachowania, które prawdopodobnie będą się mnożyć/powtarzać na stronie (wtedy raczej id będzie kiepskim pomysłem), od rzeczy unikalnych, które musimy zidentyifkować (wtedy id będzie akurat dobrym pomysłem). Ale jednak wydaje mi się, że ludzie nadużywają id i wrzucają je na siłę (co widać i po tym wątku).