php - Usare le classi CSS per il markup JS è una cattiva pratica?

Lo scenario:

• Una homepage che viene generata con PHP e un motore di template.
• La pagina è in fase di riprogettazione.
• Il nuovo design si basa su jQuery UI.
• L'attuale CMS utilizza più modelli: un modello di pagina, un modello per i dettagli degli articoli, un modello per i commenti, ecc.

Il problema: Alcuni template (come il template dei dettagli dell'articolo) generano frammenti HTML che dovrebbero utilizzare elementi jQuery UI come le schede. Attualmente, la fonte dei dati del template della pagina non contiene alcuna informazione su quali elementi dovrebbero essere trasformati in elementi jQuery UI nella chiamata principale di jQuery nell'intestazione del documento.

Soluzione possibile Aggiungi una classe CSS come "jqTabs" al markup HTML dei sotto-template e usa il selettore .jqTabs nello script principale jQuery.

Domanda È una cattiva idea?

A proposito: "Usa un CMS diverso" non è una risposta valida, perché questa non è un'opzione al momento (scadenza, budget,... come vuoi tu -.- ).

Risposta n. 1

Non è affatto una cattiva idea.

Quello è uno degli usi principali delle classi.

Una classe (come un ID) può essere usata sia come modo per stilizzare un elemento sia come punto di aggancio per lo scripting.

In questo caso, potrebbe essere la migliore soluzione possibile, poiché consente ciò che sembra essere modifiche minime al markup per un ridisegno più ampio.

Ed è facilmente reversibile.

Risposta n. 2

Credo che usare le classi CSS come punti di aggancio per JavaScript possa effettivamente essere una cattiva pratica. Il motivo per cui lo dico è che questo approccio mescola CSS e JavaScript e può spesso portare a confusione inutile.

Lasciami spiegare: in questo momento sto lavorando all'aggiunta di nuovi modelli a un sistema esistente che utilizza impostazioni amministrative controllate dinamicamente dagli utenti per gestire le proprietà CSS (larghezza della pagina, dimensioni dei caratteri, colori, ecc.). Queste impostazioni possono anche influenzare le proprietà JS (opzioni della presentazione, ritardo tra le diapositive, ecc.).

Il problema è che, poiché così tante classi CSS sono state utilizzate come ganci JavaScript, sto avendo enormi difficoltà a determinare quali classi sono usate per gli stili e quali sono usate come ganci JS, e quali sono usate per entrambi! Di conseguenza, quando si crea un nuovo template, sarebbe molto difficile partire da zero con un nuovo markup poiché lascerei fuori varie classi importanti sia per la funzionalità CSS che JS.

Il compito sarebbe molto più facile se le classi CSS fossero utilizzate SOLO per lo styling, e altri hook JS fossero utilizzati solo per JS. Immagino che questo possa essere realizzato con gli attributi dati di HTML5, che apparirebbero qualcosa del genere:

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

Utilizzando gli attributi dati di HTML5 per i collegamenti JavaScript e l'attributo class per la stilizzazione CSS, possiamo essere sicuri che tutte le classi siano SOLO relative al CSS, e tutto ciò che riguarda JavaScript ottiene semplicemente il suo attributo personalizzato.

Un'altra opzione che ho usato è prefissare qualsiasi classe CSS con js- che è mai referenziata dal JavaScript. In questo modo sapresti quali classi puoi rimuovere in sicurezza per lo stile e quali devono rimanere per la funzionalità esistente.

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