ID, class, czy data, w jaki sposób prawidłowo namierzać elementy z użyciem javascript?

Gdzieś ostatnio przeczytałem, że ID ort! się nie powinno używać, a zamiast tego klasy, a gdy chcę coś wykorzystać tylko do nadania temu jakiegoś zachowania za pomocą js, to data-att. Druga strona dyskusji upierała się, że selekt po class jest szybszy niż po data-att.

1. Czy powinienem używać ID? Czy to do css, czy to do JS, czy zamiast tego (nawet przy 1 elemencie danego typu i mam 100%, że tylko jeden taki element wystąpi na stronie) używać klas?
2. Jak to wygląda jeżeli chodzi o użycie w js? Nawet jezeli załóżmy do css powinny być tylko klasy, to do js również? Czy może css klasy do ostylowania, a do nadania zachowania data-att, a może i tu i tu klasy, tylko z konkretnymi nazwami (w przpadku użycia klasy przez js nazw powinna opisywać zachowanie elementu jak np. fadeIn w/e).

1. Jeśli element określany konkretnym ID występuje w dokumencie jeden raz to wtedy wszystko jest ok i nie widzę powodu, żeby nie wybierać za pomocą tegoż właśnie ID.
2. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

Klasy na pewno będą szybsze niż data-* bo są indeksowane przez przeglądarkę. data-* powinieneś używać do przechowywania i operowania na danych, ale kiedy już masz wybrany element.

ID są ok (choć niektórzy upierają się, że to anty-pattern), ale ja osobiście używam ich tylko do kontenerów, nie do konkretnych elementów, czyli #login-box input[type=submit], a nie nadaję ID przyciskowi. Wolniejsze, ale czytelniejsze.

No i jak nie robisz dynamicznej webaplikacji, to generalnie różnica w wydajności będzie niezauważalna.

Czyli się wyjaśniło, dzięki Panowie :)

Gdzieś ostatnio przeczytałem, że ID [błąd ortograficzny] się nie powinno używać

Bo to z czegoś wynika. Kiedyś używałem id, tyle, że praktycznie w 99% kiedy używałem Id, po jakimś czasie i tak musiałem to przerabiać na klasy. A to dlatego, że id ma takie ograniczenie, że może być tylko jeden element z danym id (więc zrobisz element id="slider", potem okazuje się, że potrzebne są dwa slajdery na stronie i musisz i tak przerobić na class="slider"). Także nieraz musiałem poprawiać cudzy kod, z id na klasy, bo ktoś nie pomyślał o tym, że to zła praktyka.

Podsumowując. Nawet jak użyjesz id, to i tak będziesz to musiał zmienić potem na klasę. Więc po co pisać dwa razy? Nie lepiej od razu nie używać id?

Wyjątkiem są rzeczy unikalne, do których musisz się jakoś odnieść, np. posty na forum internetowym. Jeśli przypiszesz do każdego posta unikalne id odpowiadające id z bazy, np.

<div class="post" id="post-128"></div>

to potem możesz się odnieść za pomocą kotwicy w HTMLu np. http://adres-forum.pl/watek/12/#post-128

albo za pomocą JS w tych wyjątkowych sytuacjach kiedy coś musi unikalne. Ale też: do zwykłego onclick nie trzeba używać id. To też lepiej zrobić na klasach, żeby móc potem stworzyć kilka elementow z takim samym onclick.

Generalnie jeśli chodzi o ID to łatwiej podać argumenty przeciwko, niż podać te rzadkie sytuacje, kiedy ID się przydają.

Co do różnicy między klasami a data, to też - trzeba mieć wyczucie kiedy dana rzecz jest bardziej odpowiednia. Klasy CSS kiepsko się nadają np. do przechowywania customowych danych. Np.

<div class="product-description" data-product="IPhone 6" data-price="3199">Ajfon</div>

Cięzko byłoby to napisać używając klas CSS....