div # nome vs #name

Question

So che in un foglio di stile div # name e #name fanno la stessa cosa. Personalmente ho usato il nome div # per la maggior parte dello stile che faccio, con il ragionamento che è leggermente più veloce, e significa che posso identificare più facilmente gli elementi HTML guardando il CSS.

Tuttavia tutti i grandi siti web che sembrano guardare uso #name oltre div # nome (overflow dello stack inclusa)

In realtà mi sto trovando molto difficile trovare molti siti web a tutti che l'uso div # nome su # nome

C'è qualche vantaggio nel fare #name che mi manca? Ci sono dei motivi per usarlo su div # name che non conosco ancora?

Answer 1

Poiché gli ID devono essere univoci nella pagina, la maggior parte degli ID in cui ti imbatteresti apparirebbe solo una volta nel tuo foglio di stile, quindi ha senso non preoccuparsi di includere l'elemento in cui apparire. Escludendo, salva anche alcuni caratteri nel tuo foglio di stile, che per i grandi siti che vengono visitati milioni e milioni di volte al giorno, risparmia un po 'di larghezza di banda.

C'è un vantaggio per includere il nome dell'elemento nel caso in cui una divisione con ID "nome" potrebbe apparire diversamente da una span con ID "nome" (dove mostrerebbe una divisione su un tipo di pagina e una span su un altro tipo di pagina). Questo è piuttosto raro e non ho mai incontrato personalmente un sito che lo abbia fatto. Di solito usano solo ID diversi per loro.

È vero che includere il nome dell'elemento è più veloce, ma la differenza di velocità tra l'inclusione e l'esclusione su un selettore ID è molto, molto piccola. Molto più piccolo della larghezza di banda che il sito sta salvando escludendolo.

Answer 2

Poiché la parte div di div#name non è necessaria (poiché ID è univoca per pagina), consente di rimuovere i file CSS più piccoli. File CSS più piccoli significa richieste HTTP più veloci e tempi di caricamento delle pagine.

E come sottolineato da NickC, la mancanza di div consente di modificare il tag HTML dell'elemento senza rompere la regola di stile.

Answer 3

Utilizzando #name solo:

Bene il primo vantaggio ovvia sarebbe che una persona modifica il codice HTML (modello o qualsiasi altra cosa) non sarebbe rompere i CSS senza saperlo modificando un elemento.

Con tutti i nuovi elementi HTML5, i nomi degli elementi sono diventati molto più intercambiabile al fine della semantica da solo (ad esempio, la modifica di un <div> per essere un più semantico <header> o <section>).

Utilizzando div # nome:

Lei ha detto "con il ragionamento che è leggermente più veloce". Senza alcuni fatti concreti degli stessi sviluppatori di motori di rendering, esiterei a formulare questa ipotesi.

Prima di tutto, è probabile che il motore memorizzi una tabella hash di elementi per ID. Ciò significherebbe che la creazione di un identificatore più specifico non dovrebbe avere alcun aumento della velocità.

In secondo luogo, e soprattutto, tali dettagli di implementazione varieranno il browser per il browser e potrebbero cambiare in qualsiasi momento, quindi anche se si dispone di dati complessi, è probabile che non si debba lasciare che sia fattore del proprio sviluppo.

Answer 4

una questione di manutenibilità e leggibilità del codice.

quando si dichiara element#foo lo stile del codice diventa rigido: se si desidera modificare la struttura del documento o sostituire i tipi di elemento, è necessario modificare anche i fogli di stile.

se si dichiara #foo ci adatteremo meglio ai principi di 'separazione di preoccupazioni' e 'KISS'.

un altro problema importante è che i file CSS vengono miniati da un paio di caratteri, che possono accumularsi su molti caratteri su fogli di stile di grandi dimensioni.

Answer 5

Poiché un ID come #name deve essere univoco per la pagina, non c'è motivo di per sé a mettere l'elemento con esso. Tuttavia, avrà una precedenza più elevata, che potrebbe essere (o non essere) desiderato. Vedere this fiddle dove il seguente #name non sovrascrive il css di div#name.

Answer 6

Uso il nome div # perché il codice è più leggibile nel file CSS.

Ho anche strutturare la mia CSS in questo modo:

ul 
{ 
    margin: 0; 
    padding: 0; 
} 
ul.Home 
{ 
    padding: 10px 0; 
} 
ul#Nav 
{ 
    padding: 0 10px; 
} 

quindi sto iniziando generico e poi sempre più specifiche in seguito.

Ha senso per me.

Answer 7

Direi che tra cui il nome dell'elemento nel selettore di id sarebbe in realtà più lenti – browser tipicamente elementi di hash con id attributi per l'elemento più veloce sguardo. Aggiungendo il nome dell'elemento si aggiungerebbe un ulteriore passaggio che potrebbe potenzialmente rallentarlo.

Un motivo per cui si potrebbe voler utilizzare il nome dell'elemento con ID è se è necessario creare un selettore più forte. Per esempio si dispone di un foglio di stile di base con:

#titlebar { 
    background-color: #fafafa; 
} 

Ma, su alcune pagine, includere un altro foglio di stile con alcuni stili che sono unici per quelle pagine. Se si voleva sostituire lo stile nel foglio di stile di base, si potrebbe rinforzare la vostra selettore:

div#titlebar { 
    background-color: #ffff00; 
} 

Questo selettore è più specifico (ha una maggiore specificity), così sarà sovrascrivere lo stile di base.

Un'altra ragione per cui si desidera utilizzare il nome dell'elemento con ID potrebbe essere se diverse pagine utilizzano un elemento diverso per lo stesso id.Ad esempio, utilizzando un arco al posto di un collegamento quando non v'è alcun collegamento corrispondente:

a#productId { 
    color: #0000ff; 
} 
span#productId { 
    color: #cccccc; 
} 

Answer 8

Legare il nome div: http://jsfiddle.net/wWUU7/1/

CSS:

<style> 
div[name=DIVNAME]{ 
color:green; 
cursor:default; 
font-weight:bold; 
} 

div[name=DIVNAME]:hover{ 
color:blue; 
cursor:default; 
font-weight:bold; 
} 
</style> 

HTML:

<div name="DIVNAME">Hover This!</div> 

Elenco dei selettori CSS: http://www.w3schools.com/cssref/css_selectors.asp