我的CSS是否正確？

我正在爲我的網站製作一組按鈕，而且我需要一些專業見解。我的CSS是否正確？

爲了減少CSS膨脹，我想子類化我的按鈕不同的顏色，ex .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; 
}

來源

2012-02-09 SkinnyG33k

有沒有在CSS * *子類的概念。你可以*添加*額外的類。 – 2012-02-09 15:04:45

你想在你那裏與多類將正常工作假設是什麼他們像這樣工作：

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

來源

2012-02-09 15:00:21

謝謝，這真的讓我想到了......上面我的代碼的真正意義在於，如果另一個開發者創建.blue類，它會破壞整個網站。 .btn-blue只能包含在「模塊」中。 – SkinnyG33k 2012-02-09 15:38:28

沒錯。如果創建獨立的.blue，肯定會導致一些問題。 – 2012-02-09 15:39:27

像.button.blue選擇器實際上選擇用於與具有這兩個「藍色」和「鍵」作爲類，而不是一個稱爲.button.blue類的元件。見http://www.w3.org/TR/CSS21/selector.html#class-html。

您可以使用您列出的.button.blue樣式規則，但您需要重新排列HTML，以便您有類似<button type="button" class="button blue"/>的內容。然而，你並不需要有一個按鈕類，因爲它是一個按鈕（或者<input type="submit">等）就足夠在你的選擇器中使用了。你可以編寫一個簡單的CSS規則button.blue, input[type=submit].blue{}

來源

2012-02-09 14:51:00 Grant

很酷，我沒有考慮添加輸入[type = submit]就像那樣=） – SkinnyG33k 2012-02-09 15:39:46

看起來像button.blue就足夠了。

兩者之間的唯一區別是如果您使用<button class="button blue">或<button class="button button-blue">。如果添加的藍色類每個人

.button 
{ 
// button style 
} 

.header 
{ 
// header style 
} 

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

當然：

你甚至不需要複製畫藍色......你可以做這樣的事情。（<div class="header blue">和<button class="button blue">）

來源

2012-02-09 14:55:12 ParPar

聯合應用要主題顏色的類。

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 
}

來源

2012-02-09 15:08:34 falsarella

我的CSS是否正確？

回答

相關問題