Aggiunta di molte classi CSS agli elementi HTML

Question

Ho una bacheca e uno dei miei utenti ha scritto uno script greasemonkey per stilizzare vari elementi all'interno della pagina. Ha fatto un ottimo lavoro con esso, ma per rendere il suo lavoro più semplice, il primo passo nel suo script è quello di analizzare la pagina corrente e aggiungere diverse classi CSS a quasi tutti gli elementi html nella pagina. la maggior parte di essi non è usata per dare uno stile alla pagina, ma invece per rendergli più facile interrogare gli elementi di coppia per pagina che modificherà effettivamente. ad esempio class = " thread_started_by_user_123 thread_with_456_posts thread_with_789_views thread_last_posted_in_by_user_12345 " etc etc

è una pratica standard? ci sono degli svantaggi nell'aggiungere molte classi css non necessarie, sia in javascript, sia sul server se dovessi aggiungerle anche alle pagine servite.

Answer 1

Questo sembra usare le classi per incorporare metadati arbitrari in elementi, il che non è certamente quello per cui è stato progettato l'attributo class. Dato che i suoi effetti iniziano e finiscono con uno script greasemonkey e sono quindi localizzati sul client, sembra un trucco abbastanza innocuo, ma non uno che consiglierei di duplicare sul lato server.

Purtroppo l'HTML non fornisce molto in termini di alternative quando si tratta di metadati diversi dall'attaccare in attributi non validi, quindi esiste un meccanismo che aggiunge un significato semantico alla "classe" attributo all'interno dei tag esistenti, ovvero microformati . C'è un sacco di clamore senza parole attorno ai microformati, ma nel complesso ruotano attorno a una best practice per le aree in cui andare all-xml è fuori discussione.

Answer 2

In termini di semantica, sì, ci sono degli aspetti negativi. Se hai classi che non sono descrittive di ciò che l'elemento in realtà è e sono lì solo per scopi di stile, questo può farti male lungo la strada se decidi di ridisegnare e / o ristrutturare.

ad esempio, BAD:

<div class="header red left-side">

BUONO:

<div class="header main current-event">

Answer 3

Se non esiste uno stile associato a una classe assegnata a element, credo che il browser lo ignorerà. Quindi non aumenterà molto il tempo di elaborazione della pagina se questo è ciò di cui ti preoccupi.

Tuttavia, se ci sono molte e molte classi per ogni elemento, allora devi capire che stai utilizzando la larghezza di banda e aumentando il tempo necessario per caricare l'intera pagina in quel modo. Puoi evitare questo problema esternalizzando il CSS in modo che il browser possa memorizzarlo nella cache.

Stai usando jquery per interrogare gli elementi che vuoi veramente modificare? Si potrebbe scoprire che è più facile scegliere quegli elementi con selettori jquery che sembrano difficili o impossibili con JavaScript standard e quindi è possibile evitare tutte queste classi extra inutili.

In conclusione, non ci sono problemi nell'utilizzare molte classi se sono necessarie, e va benissimo per la produzione, ma se non ne hai bisogno, come nel tuo caso, ci deve essere una soluzione migliore che tu può eventualmente venire con.

Answer 4

Solo per un punto dati, ho dato un'occhiata all'HTML di GMail ieri (i loro pulsanti sono molto belli) ed è pieno di quel tipo di cose.

Ecco un esempio:

class="goog-imageless-button goog-inline-block goog-imageless-button-collapse-left goog-imageless-button-collapse-right"

Answer 5

Le classi non sono solo per CSS, sono per la categorizzazione di sezioni di markup. Applicare lo stile basato su tale categorizzazione è solo un uso. Quindi, se le classi sono utili per altri scopi di categorizzazione, allora va bene, e perfettamente una buona pratica.