CSSを正しくサブクラス化していますか？

Question

私は自分のサイト用のボタンを作っています。私はいくつかの専門的な洞察力が必要です。

CSSの膨張を低減するために、私は色違い、元 .button.blueのための私のボタンをサブクラス化します。

今後、次のような問題が発生しますか？ （私はちょうど.blueのクラスを作っていないと仮定します） 代わりに.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

あなたは彼らがそうのような仕事をしたいと仮定すると正常に動作します：

<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

.button.blueようなセレクタは実際にはクラスではなく、.button.blueというクラスとして「青」と「ボタン」の両方を有していると要素の選択。 http://www.w3.org/TR/CSS21/selector.html#class-htmlを参照してください。

リストされた.button.blueスタイルルールを使用できますが、<button type="button" class="button blue"/>のようにHTMLを並べ替える必要があります。しかし、それはボタン（または<input type="submit">など）がセレクタで使用するのに十分であるため、ボタンクラスを持つ必要はありません。単純にCSSルールを書くことができますbutton.blue, input[type=submit].blue{}

Answer 3

button.blueのように見えます。

<button class="button blue">または<button class="button button-blue">を使用すると、2つの唯一の違いがあります。

あなたも、あなたがこのような何かだけで行うことができます...青色で絵を複製する必要はありません。あなたがそれらのそれぞれに青色のクラスを追加する場合はもちろん

.button 
{ 
// button style 
} 

.header 
{ 
// header style 
} 

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

を。あなたはマルチクラスとそこに持っているどのような（<div class="header blue">と<button class="button blue">）

Answer 4

はあなたのテーマにしたい色を適用するクラスを結合します。

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 
}