2010-10-12 11 views
19

Ho applicato un ID al tag body dei miei documenti HTML ultimamente to allow greater CSS control (#9). Recentemente mi è venuto in mente che potevo fare esattamente la stessa cosa applicando una classe al tag del corpo. Voglio conoscere i lati positivi e negativi di ciascuna scelta. Se ho più pagine in cui il tag body ha lo stesso ID, è meglio usare una classe? Cosa ne pensi? Perché?Classe o ID su tag body

AGGIORNAMENTO: la classe/ID è fondamentalmente ciò che intendo utilizzare per identificare il foglio di stile a quale pagina o tipo di pagina viene applicato il foglio di stile. Ad esempio, è la homepage, la pagina dei contatti, una delle tante pagine dei risultati di ricerca, una pagina di archivio, ecc.?

risposta

18

L'utilizzo di una classe è perfettamente accettabile, possibilmente più che utilizzando un ID. L'uso degli id ​​dovrebbe essere limitato il più possibile, perché possono scontrarsi con altri id e rompere cose come document.getElementById.

Un selettore di id è più specifico di un selettore di classe, che di solito lo rende una scelta migliore per il vostro caso d'uso. - David Dorward

Tuttavia, un elevato "specificità" non è sempre auspicabile. Si consideri lo body#faq #col_b a {color:gray;} nel foglio di stile principale e quindi qualcuno sviluppa un plug-in con uno sfondo grigio che va sulla pagina faq, ora devono usare !important o creare un altro attributo id per dare maggiore specificità.

Inoltre, considerare l'uso di più classi in un unico elemento del corpo:

<body class="faq two_column big_footer"> ... 
+0

Il tuo esempio di qualcuno che lo sviluppo di un plugin in cui potrebbe bloccarsi gli stili è molto probabile che accada in questa situazione. Per me, sembra che se qualcuno ha scritto il corpo della regola # faq #col_b a {color: gray;}, sei corretto che un ID/classe dovrebbe essere applicato per ottenere maggiore specificità. Tuttavia, se tu avessi body.faq #col_b a {color: gray;} Mi sembra che debba anche essere applicato un ID/classe per ottenere una specificità più alta. Puoi spiegare di più qual è la differenza tra queste due situazioni? –

+0

Non c'è molta differenza, davvero ... Personalmente non farei un id di col_b (per una colonna di destra in un layout di pagina, per esempio), userei una classe. Tra 'body # faq .col_b a' vs' body.faq .col_b a', il secondo dovrebbe essere molto più semplice da escludere da qualcun altro. In generale, penso che se stai creando CSS su cui altri possono basarsi, l'alta specificità (se è così che si chiama) è una cosa negativa quando la specificità più bassa può ottenere la stessa cosa. –

+0

Buon ragionamento. Se altri stanno costruendo sul tuo CSS, usa sempre la specificità più bassa necessaria per ottenere i risultati desiderati. –

2

ID deve essere univoco per ogni pagina (se volete markup valido), il che significa una sola istanza di un particolare ID dovrebbe esistere su una pagina

Le classi, d'altra parte, possono essere applicate a numerosi elementi per pagina. Usa le classi per cose che riutilizzano gli stessi stili e usano gli ID per più elementi unici che richiedono il proprio stile.

Idealmente, utilizzare le classi quando possibile e limitare l'uso di ID.

Per ulteriori informazioni sull'ID, vedere here e altro sulle classi, vedere here.

+0

Grazie. Ho già letto su w3schools. Potrei usare sia la classe che l'identità nella mia situazione e sarebbe accettabile. Tuttavia, sto provando a fare un brainstorming di tutti i possibili aspetti positivi/negativi dell'usare l'uno sull'altro. –

+0

In tal caso, non c'è davvero alcun impatto significativo a patto che ciò che state usando sia semanticamente corretto. –

+1

Si prega di non collegare a W3Schools - [sono spesso inaccurate e non affiliate al W3C] (http://w3fools.com/). – iono

1

È meglio utilizzare una classe se si prevede di riutilizzare uno stile nelle pagine. Gli ID sono buoni se il foglio di stile è progettato per una pagina specifica. Ma dipende ancora dalla tua app.

0

È possibile (leggi: dovrebbe) utilizzare solo l'ID sul tag del corpo.

ID = uso singolo per pagina

Classe = molteplici usi

1 tag Body tag = 1 id. Questo può essere lo stesso su pagine diverse. In sostanza, l'utilizzo del tag class è probabilmente eccessivo per questo scopo.

4

Un selettore di id è più specific di un selettore di classe, che di solito lo rende una scelta migliore per il vostro caso d'uso.

0

In HTML5, l'attributo id può essere utilizzato su qualsiasi elemento HTML (verrà convalidato su qualsiasi elemento HTML, ma non è necessariamente utile).

In HTML 4.01, l'attributo ID non può essere utilizzato con: <base>, <head>, <html>, <meta>, <param>, <script>, <style>, and <title>.

Nota: HTML 4.01 ha maggiori restrizioni sul contenuto dei valori id (per esempio, in HTML 4.01 valori ID non può iniziare con un numero).

Fonte: W3School

Problemi correlati