Qual è il modo migliore per specificare il colore nei CSS?

Question

In CSS, ho visto diversi sviluppatori che utilizzano vari metodi per specificare i colori, diciamo per esempio ho un DIV come

<div class="container"> </div> 

CSS

.container 
    { 
    background-color:#FFFFFF; 
    } 

o

.container 
    { 
    background-color:#ffffff; 
    } 

o

.container 
    { 
    background-color:#FFF; 
    } 

o

.container 
    { 
    background-color:#fff; 
    } 

o

.container 
    { 
    background-color:white; 
    } 

Vorrei sapere qual è il modo migliore per usare i colori nei CSS. Grazie in anticipo

Answer 1

Uso sempre il codice esadecimale completo ad esempio: # 3c3c3c, # 212121 ecc. È buona norma utilizzare codici esadecimali corretti. È anche possibile utilizzare nomi di colore se si conosce meglio il colore e non è necessario il codice esadecimale. Lavoro facile.

Usa:

.container{ 
    background-color: #ffffff ; /* or */ 
    background-color: white; 
} 

RGB abd RGBA può anche essere usato, ma la maggior parte del progettista preferiscono HEX breve e facile da ricordare. Uso RGBA per colore trasparente.

Answer 2

Se disponibile, utilizzare il valore del colore esadecimale di stenografia a tre caratteri e utilizzare sempre caratteri minuscoli all'interno di qualsiasi valore di colore esadecimale.

.container 
{ 
    background-color: #fff; 
} 

Solo un no, utilizzando un unico space prima di valore è anche una buona pratica.

Answer 3

L'utilizzo del valore esadecimale di un colore è sempre un valore migliore. Perché definisce l'uniformità tra browser e dispositivi, mentre la definizione del nome del colore può comportare alcune differenze.

.container{ 
    background-color:#ffffff; 
} 

Inoltre è meglio definire valori esadecimali in lettere minuscole, sempre per implementazioni in tutto il rendering piattaforma.

.container{ 
    background-color:#ffffff; 
} 

Per scegliere tra il formato breve e il formato lungo, non ha importanza perché entrambi si riferiscono allo stesso valore.

Answer 4

Mentre gli altri ha detto prima di me, non c'è metodo che è in qualche modo "ufficiale" o "migliore

mi utilizzare il seguente:.

.container 
{ 
    background-color: rgba(255,255,255,0.8); 
} 

La ragione di questo è di avere il modo più chiaro possibile (per me comunque) per modificare i colori con il modello Red Green Blue (RGB).

Sulla parte superiore della torta c'è la Alpha -setup da dove è possibile modificare l'opacità dei vostri elementi senza la opacity: 0.8; impostazione globale che colpisce tutto all'interno del div/altro elemento.

Se il livello alfa non è necessario, è sempre possibile accorciarlo su rgb(255,255,255);.