Corretto utilizzo di CSS ID e classi possa risparmiare tempo nel mantenere i fogli di stile, risparmiare tempo agli utenti quando scaricano pagine web più snella e aiutarvi a scrivere gli stili in modo efficiente.

Istruzioni

Assegnazione di nomi

1

Esistono pochi ID molto comunemente utilizzati nelle pagine web, per esempio, contenitore (o wrapper), intestazione, contenuti, sidebar, piè di pagina. Questi sono grandi esempi di CSS ID, perché i nomi utilizzati sono autoesplicativi. Essi descrivono lo scopo dell'elemento che identificano o div.

2

Classi e ID dovrebbero essere dato nomi auto-esplicativi. Il trucco è quello di scegliere un nome che sarà auto-esplicativo nel corso del tempo.

Si supponga, ad esempio, che si dispone di un elemento di pagina che spiega le specialità del giorno. Si decide di farlo rosso. Sia il nome "speciali" o il nome "rosso".

Il nome "speciale" sarebbe una scelta migliore. Nel corso del tempo, potrebbe cambiare la combinazione di colori e un nome come "rosso" sarebbe fonte di confusione, ma un nome come "speciale" sarebbe ancora consentono di riconoscere lo scopo della classe o ID.

3

Assicurarsi che i nomi che si seleziona ancora significherà qualcosa quando è necessario modificare un foglio di stile che non hai toccato per sei mesi o un anno. Quelli saranno buone scelte.

Quando utilizzare la classe o ID

4

Un ID può essere utilizzato solo una volta per pagina, ad esempio, può esistere solo un div in una pagina utilizzando il contenuto di ID. Ma una classe può essere utilizzata più volte in una pagina. Ad esempio, si potrebbero avere diverse immagini in una pagina che utilizzano una classe denominata "leftfloat", o forse "rightfloat".

5

Sulla base delle informazioni nel passaggio 1, si potrebbe pensare che è necessario utilizzare un sacco di classi e solo pochi ID. In realtà, è vero il contrario. Per il markup più snella, si desidera utilizzare classi parsimonia possibile. Utilizzando un gran numero di classi anche ha un nome, come se fosse una malattia o qualcosa del genere. Si chiama classitis.

6

Le classi sono a volte necessarie. Ma a volte, dando un elemento un ID e quindi utilizzando un selettore discendente a destinazione i bambini di quell'elemento crea molto meno codice rispetto all'assegnazione di una classe per ogni elemento figlio sarebbe.

7

Si supponga, ad esempio, che si hanno alcuni collegamenti ipertestuali in un elenco. Si potrebbero stile i collegamenti assegnando una classe per ogni singolo link nell'elenco. Oppure si potrebbe assegnare un ID al contenitore elenco (l'elemento UL o OL) e scrivere una regola utilizzando un selettore di discendente. Si supponga che si dà un UL un ID come "subnav." Qui è un selettore discendente che sarebbe lo stile l'un link senza aggiungere una classe al markup.

subnav ul un: collegamento {regola qui} 8

Quando qualcosa accade diverse volte su una pagina in luoghi dove non funziona un selettore discendente, una classe è perfettamente bene per l'uso. Già citato l'esempio dell'utilizzo di una classe a stare a galla un'immagine a sinistra o a destra ovunque su una pagina.

Si supponga di che avere diversi paragrafi per ogni elemento che si descrivere dal tuo catalogo, ma si desidera che uno dei paragrafi di essere in qualche modo diverso. Se era il paragrafo introduttivo si potrebbe assegnarlo a una classe denominata "intro". Se fosse un paragrafo dando testimonianze degli utenti, si potrebbe assegnarlo a una classe denominata "testimonial". È quindi possibile creare uno stile per la classe .intro o il .testimonial di classe che vorrei distinguere tali paragrafi particolari.

Consigli & Avvertenze

• Nomi di classe e ID possono essere scritti o tutto in minuscolo (ad esempio, #subnav) o nel caso del cammello (ad esempio, #subNav). Se si sceglie di utilizzare maiuscole-minuscole camel, assicurarsi che si digita correttamente nel markup HTML, o un browser non riconoscerà la regola CSS.
• Non può essere spazi in una classe o un nome ID. È possibile utilizzare un carattere di sottolineatura invece di uno spazio.