Cosa usare invece di ID nei selettori in CSS

Gli ID devono essere unici, mentre le classi tendono a raggruppare insieme lo stile di diversi elementi. Ho letto da qualche parte come questa analogia:

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

Student ID cards are distinct. No two students on campus will have the same student ID card. However, many students can and will share at least one Class with each other.

Inoltre, gli elementi ID tendono ad avere una priorità più alta rispetto ad altri selettori, il che rende più difficile riapplicare le regole su di essi. C'era una risposta StackOverflow relativa ad alcune funzioni JS che selezionavano solo la prima occorrenza degli stessi elementi ID (includerò il collegamento al più presto).

EDIT: prova a ottenere un sacco di elementi usando getElementByID() in js e noterai cosa stavo cercando di dire.

D'altra parte, IMO non dovresti prendere i reclami di csslint troppo rigorosamente sulle tue regole css. Alcuni di loro sono imperfetti per natura.

riferimento

Penso che il succo dell'argomento, per quelli che sono d'accordo con esso, è di usare class per i selettori di css invece di id . Questo evita regole di precedenza CSS non accettate dal kicking in.

Se sai cosa stai facendo (re class vs id selettori), e funziona per te, non cambierei solo per il gusto di cambiare, però.

Dal link :

IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page.

L'ovvia risposta alla domanda dell'OP - "Cosa usare al posto degli ID?" - è "Classi".

Dire che ho un div in ogni pagina che contiene il mio menu. Diciamo anche che ho qualche JavaScript che bersaglia questo menu, usando il suo ID, che è ... oh, non lo so ... id="menu" .

Il menu è costituito da un elenco non ordinato e io uso i CSS per trasformare questo da una normale lista di proiettili in qualcosa che assomiglia ad un menu. Fin qui, in modo convenzionale.

Ciò che Lint sta dicendo è che, sebbene io abbia sempre un solo menu sulla mia pagina, e anche se non vorrei applicare lo stile del menu a nessun altro elenco non ordinato, e anche se vorrei il mio menu stili per sovrascrivere gli stili più generali che applico a tutti gli altri elenchi non ordinati, è una cattiva pratica indirizzare i miei stili a #menu . Logicamente, quindi il mio div dovrebbe apparire come:

<div id="menu" class="menu">My menu code here</div>

Ovviamente, dovrò fare sempre attenzione ad applicare la classe 'menu' in un solo posto su ogni pagina, perché visualizzerò il menu solo una volta.

< / sarcasm-mode >

Sebbene il suggerimento di Lint - e l'obiezione sulla selezione degli ID - possa a volte essere giustificato, l'esempio sopra mostra, penso, che è idiota applicare come una regola dura e veloce. Dove abbiamo contenuto nella pagina che è 'strutturale' e solo una volta sola per pagina - l'intestazione; il menu; il piè di pagina; ecc. - questi elementi sono identificati correttamente dagli ID e correttamente selezionati allo stesso modo nel nostro CSS.

Ci sono molti motivi per selezionare un ID. Penso che lo spirito di quel messaggio di Lint sia che dovresti principalmente applicare lo styling per classi.

La selezione tramite id può essere l' eccezione in cui lo stile è condiviso su elementi simili, tranne questo, o solo questo.

Puoi usare le classi come id, ma penso che questo sia probabilmente l'evangelismo. Sarebbe come i ragazzi che insistono per non usare mai un tavolo anche quando un tavolo è perfettamente appropriato.

Questo è quello a cui generalmente mi atteno.

Lo scopo principale, a mio parere, di avere un file CSS separato è che può essere condiviso tra più pagine, che possono utilizzare gli stili in modi diversi. Utilizzando le classi css anziché gli ID, è meno restrittivo, senza preoccuparsi degli ID duplicati, mentre la specificità inferiore consente una più facile personalizzazione dello stile (in un altro file CSS o nella testa HTML).

Quando si scrive css nella testata HTML, penso che l'uso degli ID sia corretto quando si fa riferimento a un particolare elemento nella pagina. In seguito potresti decidere che gli ID di riferimento CSS possono essere utili su un'altra pagina. Finché mantieni il css in testa, piuttosto che in linea, dovrebbe essere abbastanza semplice da rifattarlo in un file css separato, sostituendo gli ID con le classi dove appropriato.

Usare gli id è come usare i singleton, e i singleton non sono uno stile molto buono. Per prototipo, sì, ma nel tentativo di fare le cose nel modo giusto, non presumere che "questa cosa gentile sarà sempre qui una volta sola" a meno che tu non lo sappia per certo. È più flessibile essere preparati per 0 e molti, non solo per 1.

E, naturalmente, anche la precedenza CSS è valida.

Eg. nel tuo esempio ci dovrebbero essere class="opening subject-container" e class="body subject-container" e puoi selezionare tu stesso se lo stile è applicabile a tutte le cose .opening o solo a .opening.subject-container , in più puoi stilare cose comuni a tutti .subject-container s come pure . Solo un possibile esempio.

Se il tuo strumento dice "Non usare ID nei selettori", buttalo via e ottieni uno strumento migliore. Non vi è alcun motivo per dedicare tempo ed energie a "comprendere" i messaggi di un linter che non comprende l'argomento che si presume sia coperto.