php - Je li korištenje CSS klasa za JS markup loša praksa?

Scenarij:

  • Početna stranica koja je generirana pomoću PHP-a i predloškovnog sustava.
  • Stranica se redizajnira.
  • Novi dizajn temelji se na jQuery UI.
  • Trenutni CMS koristi više predložaka: predložak stranice, predložak za detalje članka, predložak za komentare itd.

Problem: Neki predlošci (poput predloška za detalje članka) generiraju HTML fragmente koji bi trebali koristiti jQuery UI elemente poput kartica. Trenutno izvor podataka predloška stranice ne sadrži nikakve informacije o tome koji se elementi trebaju pretvoriti u jQuery UI elemente u glavnom jQuery pozivu u zaglavlju dokumenta.

Moguće rješenje Dodajte CSS klasu poput "jqTabs" u HTML markup podpredložaka i koristite selektor .jqTabs u glavnom jQuery skriptu.

Pitanje Je li ovo loša ideja?

Usput: „Koristite drugi CMS“ nije valjan odgovor, jer to trenutno nije opcija (rok, budžet,... šta god -.- ).

Odgovor #1

Nimalo loša ideja.

To je jedna od primarnih upotreba klasa.

Klasa (poput ID-a) može se koristiti i kao način stiliziranja elementa i/ili kao okidač za skriptiranje.

U ovom slučaju, to bi moglo biti najbolje moguće rješenje, jer omogućuje ono što se čini kao minimalne promjene u označavanju za širi redizajn.

I to se lako može preokrenuti.

Odgovor #2

Vjerujem da korištenje CSS klasa kao kukica za JavaScript zaista može biti loša praksa. Razlog zbog kojeg to tvrdim je taj što ovaj pristup miješa vaš CSS i JavaScript te često može dovesti do nepotrebne zabune.

Dozvolite mi da objasnim: Trenutno radim na dodavanju novih predložaka u postojeći sustav koji koristi dinamička korisnička kontrolirana administratorska podešavanja za kontrolu CSS svojstava (širina stranice, veličine fonta, boje, itd.). Ova podešavanja također mogu utjecati na JS svojstva (opcije slideshowa, odgoda između slajdova, itd.).

Problem je u tome što je toliko CSS klasa korišteno kao JavaScript kuka da mi je iznimno teško odrediti koje se klase koriste za stilove, koje se koriste kao JS kuke, a koje se koriste za oboje! Kao rezultat toga, prilikom izrade novog predloška bilo bi vrlo teško početi ispočetka s novim markupom jer bih izostavio razne važne klase za funkcionalnost i CSS-a i JS-a.

Zadatak bi bio mnogo lakši ako se CSS klase koristile SAMO za stiliziranje, a drugi JS hooks samo za JS. Zamišljam da se to postigne pomoću HTML5 data atributa, što bi izgledalo otprilike ovako:

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

Korištenjem HTML5 atributa podataka za JavaScript hookove i atributa klase za CSS stiliziranje, možemo biti sigurni da su sve klase ISKLJUČIVO povezane s CSS-om, a sve što je vezano uz JavaScript jednostavno dobiva svoj prilagođeni atribut.

Još jedna opcija koju sam koristio je prefiksiranje bilo koje CSS klase s js- koja se ikada poziva u JavaScriptu. Na taj način biste znali koje klase možete sigurno ukloniti radi stiliziranja, a koje moraju ostati radi postojeće funkcionalnosti.

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