Sto sottoclassi correttamente il mio CSS?

Question

Sto realizzando un set di pulsanti per il mio sito e ho bisogno di alcune informazioni professionali.

Per ridurre il numero di colori CSS, voglio sottoclassi i miei pulsanti per diversi colori, ex .button.blue.

Si verificheranno problemi in futuro? (supponendo che non crei una classe di solo .blue) Devo usare qualcosa come .button.button-blue invece?

.button { 
    display:inline-block; 
    padding: 9px 18px; 
    margin: 20px; 
    text-decoration: none; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    text-align: center; 
    background: #FFE150; 
} 
.button.blue { 
    background: #49b8e7; 
    border:1px solid #54abcf; 
    border-bottom:1px solid #398fb4; 
    color:#FFF 
    text-shadow: 0 1px 0 rgba(255,255,255, 0.5); 
} 
.header{ 
    height: 50px; 
} 
.header.blue { 
    background: blue; 
    color: #fff; 
} 

Answer 1

Quello che hai lì con le pluriclassi funzionerà benissimo supponendo che si desidera loro di lavorare in questo modo:

<div class="button blue"> 
Will use .button and .button.blue 
</div> 

<div class="button"> 
Will only use .button 
</div> 

<div class="header blue"> 
Will use .header and .header.blue 
</div> 

<div class="header"> 
Will only use .header 
</div> 

<div class="blue"> 
Will use neither of the .blue declarations because it doesn't contain header or button. 
</div> 

Answer 2

Un selettore come .button.blue effettivamente seleziona un elemento con che ha sia "blu" e "pulsante" come classi, non una classe denominata .button.blue. Vedi http://www.w3.org/TR/CSS21/selector.html#class-html.

Puoi usare la regola di stile .button.blue che hai elencato, ma dovrai riorganizzare il codice HTML in modo che tu abbia qualcosa come <button type="button" class="button blue"/>. Tuttavia, non è davvero necessario avere una classe pulsante poiché è un pulsante (o <input type="submit">, ecc.) Sufficiente per essere utilizzato nel selettore. Potresti scrivere una regola CSS che sia semplicemente button.blue, input[type=submit].blue{}

Answer 3

Sembra sufficiente button.blue.

L'unica differenza tra i due è se si utilizza <button class="button blue"> o <button class="button button-blue">.

Puoi anche non è necessario duplicare il dipinto di blu ... Si può solo fare qualcosa di simile:

.button 
{ 
// button style 
} 

.header 
{ 
// header style 
} 

.blue 
{ 
    background: blue; 
    color: #fff; 
} 

Naturalmente se si aggiunge la classe blu a ciascuno di essi. (<div class="header blue"> e <button class="button blue">)

Answer 4

combinare le classi che applicano il colore che si desidera tema.

HTML:

<input type="text" class="text-field-required default" .../> 
<select class="autocomplete-drop-down blue">...</select> 
<a href="#" class="button-link green" .../> 

CSS:

.text-field-required { 
    //component css theme without colors 
} 
.default { 
    //default color css theme for any component 
} 
.blue { 
    //blue css theme for any component 
} 
.green { 
    //green css theme for any component 
}