क्या मैं अपने सीएसएस को सही ढंग से उप-वर्गीकृत कर रहा हूं?

Question

मैं अपनी साइट के लिए बटन का एक सेट बना रहा हूं, और मुझे कुछ पेशेवर अंतर्दृष्टि की आवश्यकता है।

सीएसएस ब्लोट को कम करने के लिए, मैं अलग-अलग रंगों के लिए अपने बटन को उपclass करना चाहता हूं, पूर्व .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"/> जैसा कुछ हो। हालांकि, आपको बटन बटन होने की आवश्यकता नहीं है क्योंकि यह बटन (या <input type="submit"> इत्यादि) आपके चयनकर्ता में उपयोग करने के लिए पर्याप्त है। आप एक सीएसएस नियम लिख सकते हैं जो कि button.blue, input[type=submit].blue{}

Answer 3

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

Answer 4

रंग आप विषय को लागू करने के लिए चाहते हैं कक्षाओं को संयुक्त करें।

HTML:

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

सीएसएस:

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