State attenti con le unità CSS em quando sfruttate le regole di specificità?

Question

Ho problemi a scrivere codice CSS manutenibile quando la dimensione del font è specificata con unità EM anziché unità PX. Sono stato abituato a scrivere codice CSS in questo modo:

body {font-size: 12px;} 
body .sidebar {font-size:11px;} 
body .sidebar .loadmore {font-size:10px;} 
body .sidebar .warning {font-size:13px;} 

L'idea è che in molte pagine attraverso il sito, c'è un sacco di testo che dovrebbe avere 12 pixel font-size. Approfitto delle regole di specificità per scavalcare la dimensione del font 12px in aree speciali del sito.

Diciamo che ho riscritto il codice di cui sopra come:

body {font-size: 12em;} 
body .sidebar {font-size:11em;} 
body .sidebar .loadmore {font-size:10em;} 
body .sidebar .warning {font-size:13em;} 

Se ho sostituito px con em nel codice di cui sopra, la mia comprensione è che perdo il vantaggio di regole di specificità. La riga 3 del codice verrebbe interpretata come "10 em di 11 em di 12 em" che non ha affatto lo stesso significato di "sovrascrivi tutte le regole precedenti e usa 10 em di (qual è il valore predefinito?)". È quello che ho dichiarato corretto?

Se quello che ho detto è corretto, allora come si scrive una regola per la dimensione del carattere come "usa la dimensione del carattere X per tutti gli elementi, ma usa la dimensione del carattere Y sulle barre laterali"?

Answer 1

John la specificità di cui parli avverrà nel modo in cui hai dichiarato. Un riferimento al perché può essere visto: http://kyleschaeffer.com/best-practices/css-font-size-em-vs-px-vs-pt-vs/.

Modifica In risposta alla modifica, considera ciò che jnylen ha pubblicato nei commenti del tuo post originale.

Una dimensione del font di 12 em come è stato elencato per body {font-size: 12em;} ridimensiona la dimensione del carattere predefinito a 12x è la dimensione corrente. Se ti piacerebbe usare em è necessario considerare a quale velocità di scala si desidera utilizzarli e fare i conti. Se si desidera impostare dimensioni fisse con istruzioni nidificate, è necessario attenersi agli attributi fissi (pixel). Il vantaggio degli em come dichiarato nell'articolo che ho collegato è che puoi impostare una dimensione predefinita, diciamo 12 px e poi usarli per ridimensionarli. Ad esempio nei siti Web basati su dispositivi mobili.

Answer 2

Sì, i valori em si "moltiplicano" insieme quando gli elementi a cui si applicano sono nidificati. Non è necessariamente un problema di specificità: se hai specificato le regole singolarmente per .loadmore e .sidebar vedresti lo stesso problema, dal momento che .sidebar contiene .loadmore.

Ecco un esempio di un modo di lavorare con questo: http://jsfiddle.net/PJWrW/

Io di solito uso sia px o la percentuale di unità per le dimensioni dei caratteri, per rendere esplicito che sto impostando una dimensione di carattere assoluto o modificare il tipo di carattere genitore dimensione.

A volte uso le unità em per definire dimensioni come paddings e larghezze, dal momento che un'unità em è sostanzialmente la larghezza di una lettera con le dimensioni del carattere corrente.

Answer 3

Per quanto ne so, se si usano le em per le dimensioni del carattere, non c'è un modo per impostare una dimensione del carattere standard per gli elementi nella barra laterale sinistra (o altrove per quella materia) mentre si imposta lo specifico dimensione di alcuni elementi in quella barra laterale. Se usi em, dovrai specificare le dimensioni di tutti gli elementi in quella barra laterale.

Personalmente di solito uso px per ridimensionare il carattere, semplicemente perché puoi impostare una dimensione standard per alcuni elementi come dici nel tuo post.

Gli unici argomenti convincenti che ho sentito per l'uso di em su px riguardano problemi di ridimensionamento che non sono più un problema (IE6 non consente di modificare manualmente la dimensione del carattere se si utilizza px ma la maggior parte delle persone ha smesso di hackerare per IE6 a indietro) L'unica situazione reale che posso vedere usando em come vantaggio è se si desidera implementare funzionalità in cui l'utente può modificare la dimensione del carattere tramite JavaScript come here