如何在沒有冗餘的情況下以最佳方式使用css類？

我有一個電子郵件文本框與默認，成功，錯誤CSS類。如何在沒有冗餘的情況下以最佳方式使用css類？

<input id="emailInput" class="sansserif inputuser" style=" margin-top: 5px;" type="text" placeholder="Enter Email.."/> 

.default{ 
    width: 306px; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    font-size: 16px; 
    color: #737373; 
    font-weight: 600; 
    background-color: white; 
    background-image: url('../Styles/Icons/User Male-35.png'); 
    background-position: 5px 5px; 
    background-repeat: no-repeat; 
    padding: 12px 20px 12px 40px; 
} 

.error{ 
    width: 306px; 
    box-sizing: border-box; 
    border: 2px solid #ff0000; 
    border-radius: 4px; 
    font-size: 16px; 
    color: #737373; 
    font-weight: 600; 
    background-color: white; 
    background-image: url('../Styles/Icons/User Male-35.png'); 
    background-position: 5px 5px; 
    background-repeat: no-repeat; 
    padding: 12px 20px 12px 40px;  
} 

.success{ 
    width: 306px; 
    box-sizing: border-box; 
    border: 2px solid #00b33c; 
    border-radius: 4px; 
    font-size: 16px; 
    color: #737373; 
    font-weight: 600; 
    background-color: white; 
    background-image: url('../Styles/Icons/User Male-35.png'); 
    background-position: 5px 5px; 
    background-repeat: no-repeat; 
    padding: 12px 20px 12px 40px;  
}

在這裏，我將下面的CSS類默認情況下，錯誤和成功，同時從上述三類驗證電子郵件文本框，但唯一不同的是邊境屬性只。如何減少多餘的CSS屬性有什麼更好的方法來實現這一點。

來源

2016-11-15 Arun Nandha

您可以通過用逗號分隔類來將樣式應用於多個類。例如'.one，.two'會影響類'one'或class'two'的任何項目的樣式 – Jhecht

使用對象的「繼承」...即具有所有公共信息的CSS類「.email_textbox」類（在普通之後定義）與變化。 – Myst

爲同一個css做了一個普通的類，還有三個不同的類，用於默認的成功錯誤並據此使用它 –

您可以在一個地方使用，如果需要連接多個選擇，並覆蓋後來定義了類似的CSS：

注：，你是壓倒一切的，即對.error和.success的樣式都必須在通用的風格來後否則他們將被默認樣式覆蓋，您不會看到任何更改。

.default, 
.error, 
.success { 
    width: 306px; 
    box-sizing: border-box; 
    border: 2px solid #ccc; 
    border-radius: 4px; 
    font-size: 16px; 
    color: #737373; 
    font-weight: 600; 
    background-color: white; 
    background-image: url('../Styles/Icons/User Male-35.png'); 
    background-position: 5px 5px; 
    background-repeat: no-repeat; 
    padding: 12px 20px 12px 40px; 
} 

.error { 
    border-color: #ff0000; 
} 

.success { 
    border-color: #00b33c; 
}

來源

2016-11-15 06:29:59

非常感謝... @ Muhammad Usman ...不錯的 –

@ArunNandha不用客氣） –

如何在沒有冗餘的情況下以最佳方式使用css類？

回答

相關問題