CSS'mi doğru şekilde alt sınıflara ayırıyor muyum?

Question

Sitem için bir dizi düğme yapıyorum ve bazı profesyonel bilgilere ihtiyacım var.

CSS bloat'ını azaltmak için düğmelerimi farklı renkler için 10 .button.blue adlı alt sınıflara ayırmak istiyorum.

şu Gelecekte sorun tabi olacak mı? (sadece bir sınıf yapmıyorum varsayarak.) Bunun yerine .button.button mavisi gibi bir şey kullanmak zorunda mıyım?

.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

.

HTML:

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

CSS:

CSS'deki * sınıflara * hiçbir kavram yoktur

.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 
} 

Answer 2

.button.blue gibi bir seçici aslında "mavi" ve sınıfların değil, .button.blue adında bir sınıf olarak "renkli" hem var olan bir element için seçer. Bakınız http://www.w3.org/TR/CSS21/selector.html#class-html.

Listelenen .button.blue stil kuralını kullanabilirsiniz, ancak HTML'nizi yeniden düzenlemek için <button type="button" class="button blue"/> gibi bir şeye sahip olmanız gerekir. Bununla birlikte, düğmenizden (veya <input type="submit">, vb.) Seçicinizde kullanmak için yeterli olduğundan bir düğme sınıfına ihtiyacınız yoktur. Sadece button.blue, input[type=submit].blue{}

Answer 3

olduğunu button.blue yeterlidir gibi görünüyor bir CSS kuralını yazabiliriz.

Bu ikisi arasındaki tek fark, <button class="button blue"> veya <button class="button button-blue"> kullanıyor olmanızdır.

Hatta Böyle bir şey yapmak sadece olabilir ... mavi boyama çoğaltmak gerekmez: Elbette

.button 
{ 
// button style 
} 

.header 
{ 
// header style 
} 

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

bunların her birine mavi sınıf eklerseniz.

<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 4

Eğer tema istediğiniz rengi uygulayarak sınıfları birleştirin: Bunları şöyle çalışmak istiyorum ne varsayarak iyi çalışır çoklu sınıfları ile orada var (<div class="header blue"> ve <button class="button blue">)