सीएसएस नामकरण सम्मेलन चर्चा (jqueryui)

Question

मैं एक परियोजना पर काम कर रहा हूं जिसमें क्लाइंट साइड कोड का एक बड़ा सौदा शामिल है। हम सीएसएस कक्षाओं और तत्व आईडी के लिए सम्मेलन नामकरण पर चर्चा कर रहे थे और मुझे आश्चर्य हुआ कि इसके बारे में कोई सामग्री ऑनलाइन नहीं है।

मैंने देखा है कि jquery ui एक परंपरा का उपयोग करता है जहां नामित शैली (जैसे ui-widgetname-classname- [subclassname]) है, इन वर्गों को उनके पदानुक्रम (.ui .widget .classname) के आधार पर नामित करने के विपरीत। मुझे लगता है कि यह डीओएम संरचना पर कम निर्भर करता है लेकिन बहुत लंबे नाम बनाता है।

आपके अनुभव के आधार पर, क्या आपके पास सीएसएस शैलियों का नामकरण करने के लिए एक शैली मार्गदर्शन है? किसी भी डॉस और डॉट्स और नुकसान से बचने के लिए? से आप

Answer 1

.ui-widget-classname का उपयोग बजाय .ui .widget .classname की विरासत ब्राउज़रों (अर्थात् IE6/7) के लिए समर्थन की वजह से है

आशा सुनने के लिए। एक साथ कई कक्षाओं को चुनने में सक्षम होने पर आपका सीएसएस अधिक पठनीय और रखरखाव योग्य होगा, आईई 6/7 अपेक्षित व्यवहार नहीं करेगा।

उदाहरण के लिए, कि सटीक तत्व को लक्षित करने के, तो आप ऐसा जैसे शैलियों श्रृंखला की आवश्यकता होगी:

.ui.widget.classname { 
    background: red; 
} 

IE6/7 में .classname के साथ कुछ भी तत्व से मेल खाएगा। .ui-widget-classname जैसी कक्षाएं आपको वर्बसिटी की लागत पर लक्षित करने के लिए एक बहुत ही विशिष्ट चयनकर्ता प्रदान करती हैं।

अन्य समाधान divs घोंसला बनाने से है, इसलिए जैसे:

<div class="ui"> 
    <div class="widget"> 
    <div class="classname"> 
    </div> 
    </div> 
</div> 

.ui .widget .classname { 
    background: red; 
} 

जो मामले में अपनी शैली सभी ब्राउज़र में काम करेंगे।

इन दो विकल्पों के बीच, मुझे लगता है कि jQuery UI ने एकल div के साथ जितना संभव हो सके डीओएम को संशोधित करना चुना है, जबकि स्टाइल के लिए आसान पहुंच प्रदान करना है।