Quali sono i motivi per utilizzare l'attributo id per scopi CSS?

Question

Ho sempre utilizzato l'attributo class, mai idai fini della selezione e dello stile CSS. So che il id deve essere unico, ma non sembra essere un motivo per usarlo per i CSS.

L'unico motivo per cui ho utilizzato l'attributo id è per JavaScript e l'etichettatura modulo.

Trovo che il mix id e class ai fini del CSS possa causare confusione e per me è un buon modo per forzare la separazione di stile e comportamento.

C'è una buona ragione per usare id per scopi CSS? C'è qualcosa che può essere raggiunto con id che non può essere fatto con class?

commenti che ho trovato utili/interessanti

• Si potrebbe dire la stessa cosa sulle classi. C'è un sacco di JavaScript là fuori che fa (e deve) elementi target di una classe specifica. Cambiare la classe in queste istanze è altrettanto problematico dal punto di vista del comportamento. - AaronSieb
• Gli ID hanno una specificità diversa nella cascata rispetto alle classi. - Killroy
• Utilizzando ID per lo styling ha un senso se si tratta di un elemento che non ha duplicato, soprattutto se si tratta di qualcosa che si presenta in tutte le/maggior parte delle pagine - RichN

Answer 1

Il motivo principale per cui utilizzo i tag ID è comunicare con le persone che stanno leggendo il mio codice. In particolare, il tag ID semplifica il riferimento a qualsiasi elemento specifico che desiderano con la massima tranquillità, sapendo che qualsiasi modifica apportata a esso avrà effetto solo su quell'elemento.

MODIFICA: C'è anche un motivo più tecnico per utilizzare i tag ID che potresti non sapere. Ho aggiornato di nuovo questo post come da vol7ron's comment e alcune ricerche ulteriori per scopi storici. Questa informazione può essere abbastanza illuminante per coloro che sono nuovi ai CSS.

Il seguente schema illustra esattamente come la natura "a cascata" di Cascading Style Sheets funziona:

1. Vincitore = importante dichiarazione!.
   • Es. #some-element {color: blue !important;} battiti #some-element {color: red;}.
2. Vincitore = CSS in linea.
   • Eg .:
     • <div id="some-element" style="#some-element {color: yellow;}">some content</div> battiti ...
     • <style type="text/css">#some-element {color: red;}</style> e ...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/>.
3. Vincitore = Greatest ° ID selettori.
   • Es. #some-element#id-2 {color: blue;} battiti #some-element {color: red;}.
4. Vincitore = Greatest ° classe, pseudo-classe, e altro attributo selettori.
   • Es. .some-elements.class-2 {color: blue;} battiti .some-elements {color: red;}.
5. Vincitore = Maggior ° nomi degli elementi e pseudo-elementi nel selettore.
   • Es. #some-element:hover {color: blue;} battiti #some-element {color: red;}.
6. Vincitore = Più di recente letto dalla macchina.
   • Eg .:
     • <style type="text/css">#some-element {color: red;}</style> battiti ...
     • <link type="text/css" link rel="stylesheet" href="set-some-element-color-to-blue.css"/> perché CSS interno viene letto dopo esterno CSS.

In questo quadro, avviare confrontando 2 stili CSS in base ai criteri più alti del contorno, vale a dire "1. Vincitore = ! Importante dichiarazione." Se uno stile ha una priorità più alta dell'altro in quell'aspetto, vince. Se sono uguali in questo aspetto, continua fino al prossimo criterio finché non trovi il fattore di differenziazione.