php - Este folosirea claselor CSS pentru marcajul JS o practică proastă?

Scenariul:

• O pagină principală care este generată cu PHP și un motor de șabloane.
• Pagina este în curs de reproiectare.
• Noul design se bazează pe jQuery UI.
• CMS-ul actual folosește mai multe șabloane: un șablon de pagină, un șablon de detalii ale articolului, un șablon pentru comentarii etc.

Problema: Unele șabloane (cum ar fi șablonul de detalii articol) generează fragmente HTML care ar trebui să utilizeze elemente jQuery UI, cum ar fi taburile. În prezent, sursa de date a șablonului paginii nu conține nicio informație despre care elemente ar trebui transformate în elemente jQuery UI în apelul principal jQuery din antetul documentului.

Soluție posibilă Adăugați o clasă CSS precum "jqTabs" în markup-ul HTML al sub-template-urilor și folosiți selectorul .jqTabs în scriptul principal jQuery.

Întrebare Este aceasta o idee proastă?

BTW: „Folosește un CMS diferit” nu este un răspuns valid, deoarece aceasta nu este o opțiune momentan (termen limită, buget,... cum vrei tu -.- ).

Răspuns #1

Deloc o idee rea.

Aceasta este una dintre utilizările principale ale claselor.

O clasă (precum un ID) poate fi folosită atât ca o modalitate de a stiliza un element, cât și/sau ca un punct de acces pentru scripting.

În acest caz, ar putea fi cea mai bună soluție posibilă, deoarece permite ceea ce pare a fi modificări minime ale marcajului pentru o reproiectare mai largă.

Și este ușor reversibil.

Răspunsul #2

Cred că folosirea claselor CSS ca puncte de legătură pentru JavaScript poate într-adevăr să fie o practică proastă. Motivul pentru care spun asta este că această abordare amestecă CSS-ul cu JavaScript-ul și poate duce adesea la confuzie inutilă.

Permiteți-mi să explic: În acest moment lucrez la adăugarea de șabloane noi într-un sistem existent care folosește setări administrative controlate dinamic de utilizator pentru a controla proprietățile CSS (lățimea paginii, dimensiunile fontului, culorile etc.). Aceste setări pot afecta, de asemenea, proprietățile JS (opțiuni pentru slideshow, întârziere între slide-uri etc.).

Problema este că, deoarece atât de multe clase CSS au fost folosite ca puncte de acces JavaScript, îmi este extrem de greu să determin care clase sunt folosite pentru stiluri și care sunt folosite ca puncte de acces JS, și care sunt folosite pentru ambele! Ca urmare, atunci când creez un șablon nou, ar fi foarte dificil să încep de la zero cu un markup nou, deoarece aș lăsa deoparte diverse clase importante atât pentru funcționalitatea CSS, cât și pentru cea JS.

Sarcina ar fi mult mai ușoară dacă clasele CSS ar fi folosite NUMAI pentru stilizare, iar alte hook-uri JS ar fi folosite doar pentru JS. Îmi imaginez că acest lucru ar fi realizat cu atributele de date HTML5, care ar arăta cam așa:

<a href="#" class="button" data-lightbox="true" data-slide-delay="250">my link</a>

Prin utilizarea atributelor de date HTML5 pentru conectarea JavaScript și a atributului class pentru stilizarea CSS, ne putem asigura că toate clasele sunt DOAR legate de CSS, iar orice este legat de JavaScript primește pur și simplu atributul său personalizat.

O altă opțiune pe care am folosit-o este prefixarea oricărei clase CSS cu js- care este vreodată referențiată de JavaScript. În acest fel, ai ști care clase le poți elimina în siguranță pentru stilizare și care trebuie să rămână pentru funcționalitatea existentă.

<a href="/mylink" class="my-style-class my-other-style-class js-my-hook-1 js-myhook-2">
    My link
</a>