¿Estoy subclasando mi CSS correctamente?

Question

Estoy creando un conjunto de botones para mi sitio, y necesito cierta información profesional.

Para reducir la saturación de CSS, quiero crear una subclase de mis botones para diferentes colores, ex .button.blue.

¿Los siguientes problemas incurrirán en el futuro? (asumiendo que no hago una clase de solo .blue) ¿Debo usar algo como .button.button-blue?

.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

Lo que tienes allí con las múltiples clases no tendrán ningún problema suponiendo que quiere que trabajen de esta manera:

<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 selector como .button.blue realidad selecciona para un elemento con quien tiene tanto "azul" y "botón", como clases, no una clase llamada .button.blue. Ver http://www.w3.org/TR/CSS21/selector.html#class-html.

Puede utilizar la regla de estilo .button.blue que ha enumerado, pero tendrá que reorganizar su HTML para que tenga algo como <button type="button" class="button blue"/>. Sin embargo, realmente no necesita tener una clase de botón ya que es un botón (o <input type="submit">, etc.) suficiente para usar en su selector. Puede escribir una regla CSS que es simplemente button.blue, input[type=submit].blue{}

Answer 3

Parece que button.blue es suficiente.

La única diferencia entre los dos es si usa <button class="button blue">, o <button class="button button-blue">.

Incluso no es necesario duplicar la pintura en azul ... Sólo puede hacer algo como esto:

.button 
{ 
// button style 
} 

.header 
{ 
// header style 
} 

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

Por supuesto, si se agrega la clase azul para cada uno de ellos. (<div class="header blue"> y <button class="button blue">)

Answer 4

combinar los tipos aplicando el color que desee con el 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 
}