減少CSS代碼

Question

我創建了兩個具有相同屬性但只有一個屬性（寬度）不同的類，那麼如何減少CSS代碼？

.login-box button{ 
    width: 100%; 
    height: 40px; 
    background-color: #ffd133; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: bold; 
    border: 1px solid #ffd133; 
    border-radius: 5px; 
    cursor: pointer; 
} 


.add-category-box button{ 
    width: 48%; 
    height: 40px; 
    background-color:#ffd133; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: bold; 
    border: 1px solid #ffd133; 
    border-radius: 5px; 
    cursor: pointer; 
}  

Answer 1

您可以用逗號（，）組選擇分隔符：

.login-box button, 
.add-category-box button { 
    width: 100%; 
    height: 40px; 
    background-color: #ffd133; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 14px;font-weight: bold; 
    border: 1px solid #ffd133; 
    border-radius: 5px; 
    cursor: pointer; 
} 

.add-category-box button { 
    width: 48%; 
} 

Answer 2

在這種情況下，你可以給該按鈕一類的.button並使其具有不同變化的可重用組件。

.button { 
    width: 48%; 
    height: 40px; 
    background-color: #ffd133; 
    color: #ffffff; 
    text-transform: uppercase; 
    font-size: 14px; 
    font-weight: bold; 
    border: 1px solid #ffd133; 
    border-radius: 5px; 
    cursor: pointer; 
} 

.button--full { 
    width: 100%; 
} 

.button--outline { 
    background: transparent; 
    border: 1px solid #000; 
} 

而在你的HTML可以作爲添加成分的上述類：

HTML

<button class="button">Submit</button> 

OR

<button class="button button--full">Login</button> 

這樣的話，你可以重複使用的按鈕您項目中的任何地方都很容易。