वस्तु उन्मुख सीएसएस

Question

मैं इस presentation about object oriented css देखा है, लेकिन मुझे लगता है कि मैं या तो इसे सही ढंग से समझ में नहीं आता या OO सीएसएस उपयोग कर के लाभ समझ में नहीं आता:

उदाहरण HTML:

<div class="border-1 bg-2 color-1 font-1"> 
</div> 

उदाहरण सीएसएस :

/* borders */ 
.border-1 { border: 1px solid red; } 

/* backgrounds: */ 
.bg-2 { background: yellow; } 

/* other sections */ 

मैं शैलियों उदाहरण के लिए, जल्दी से एक से अधिक तत्वों के लिए बदलने के लिए, रंग योजना स्विच करने के लिए बहुत उपयोगी होगा सक्षम होने में सक्षम होने में एक फायदा नहीं दिखता।

लेकिन असल में, आप एचटीएमएल के अंदर शैली/देखो को परिभाषित कर रहे हैं, या कम से कम इसका एक हिस्सा। बेशक, यह style विशेषता का उपयोग करने से बेहतर है, क्योंकि आप अभी भी समूहों के समूह के लिए शैलियों का आदान-प्रदान करने में सक्षम हैं।

बिंदु है, आप HTML के अंदर शैली के समूहों को परिभाषित कर रहे हैं, लेकिन मुझे पता चला है कि आप "तार्किक" समूहों HTML के अंदर बनाना चाहिए (उदाहरण के लिए class="nav-item"/class="btn submit-btn") और सीएसएस पूरी तरह से शैली लागू होता है और जो तत्वों को परिभाषित करता है "स्टाइलिस्ट" दृष्टिकोण से एक साथ हैं (उदाहरण के लिए .nav-item, .submit-btn { background: red; })।

शायद मैं पूरी तरह से अवधारणा को गलत समझा। हालांकि, मैं अभी भी अपने सीएसएस का निर्माण करने का एक अच्छा तरीका नहीं जानता।

Answer 1

सीएसएस ऑब्जेक्ट उन्मुख नहीं है। मेरा सुझाव है कि आपने "ऑब्जेक्ट ओरिएंटेड सीएसएस" के बारे में क्या पढ़ा है और इसके बजाय सीएसएस के साथ समस्याओं पर ध्यान केंद्रित करना है जिसे आप हल करने की कोशिश कर रहे हैं। अगर वे सीएसएस को लिखना, पढ़ना और बनाए रखना, या अधिक सुविधाएं (जैसे सीएसएस चर) प्राप्त करना आसान लगता है, तो मुझे लगता है कि Less या Sass आपकी ज़रूरत को बेहतर तरीके से पूरा करेगा।

"वस्तु उन्मुख सीएसएस" के साथ सुझाए गए सीएसएस का उपयोग करना केवल भयानक, गैर-अर्थपूर्ण और अर्थहीन सीएसएस की ओर जाता है जो लंबे समय तक "साधारण" सीएसएस से बनाए रखना आसान नहीं होता है। id और class दोनों semantic and meaningful names होना चाहिए, इसलिए एक ढांचा का उपयोग करना जो आपको अर्थपूर्ण सीएसएस (जो प्रस्तुति के बजाय इरादे का वर्णन करता है) लिखने की अनुमति देता है, मेरी विनम्र राय में बहुत बेहतर है।

Answer 2

यह एक "नाम छोड़ने" का एक और तरीका है, जो एक वास्तविक विधि है। जो कोड आपने दिखाया है वह अक्सर "enterprise css" नामक अपमानजनक है, इसके लिए कोई बहाना नहीं है।

अधिक से अधिक, तत्वों पर कई कक्षाएं वास्तव में प्रदर्शन को नुकसान पहुंचाती हैं।

मैं सलाह देता हूं कि आप अपने सीएसएस को बनाते समय Mozilla's guidelines का पालन करें, जो अन्य ब्राउज़रों के लिए भी काम करता है। और IE6, 7 और 8. के ​​लिए हैक के साथ समर्पित .css फ़ाइल बनाएं।

Answer 3

विचार यह है कि आप कई तत्वों पर एक ही सीएसएस कक्षाओं का पुन: उपयोग करते हैं। यह दोनों लेखन सीएसएस और सीएसएस बनाए रखने पर बचाता है। तो बजाय .create-button.cancel-button.create-and-new बटन को परिभाषित करने की आप सिर्फ एक .button कि गद्दी, size, background, color, line-height, font-size, font-family और font-weight को परिभाषित करता है के लिए होगा।और अलग बटन शैलियों के लिए वास्तव में कुछ छोटी कक्षाएं color या font-size

एक उचित oocss परियोजना मैं अक्सर अभी भी उपयोग बदलना चाहते यहां पाया जा सकता: https://github.com/stubbornella/oocss/wiki

लेकिन हां आप कम है, यह पर एक नजर है चाहिए उचित वर्ग नामों के साथ कई तत्वों पर एक ही सीएसएस गुणों का पुन: उपयोग करने में आसान बनाता है।

Answer 4

"ऑब्जेक्ट उन्मुख सीएसएस" वास्तव में केवल एक डिजाइन पैटर्न है जो आपके सीएसएस से अधिक लाभ उठाने के लिए है और मूल रूप से वही दृष्टिकोण है जोनाथन स्नूक्स SMACSS पर कॉल करता है।

चाहे आप इसे ओओसीएसएस या एसएमएसीएसएस कहते हैं, दृष्टिकोण की कुंजी यह है कि आप nav abstraction जैसे सामान्य यूआई तत्व बनाते हैं। इन UI तत्वों को तत्व और/या कंटेनर तत्व में अतिरिक्त कक्षाएं जोड़कर अधिक विशिष्ट विशेषताओं के साथ बढ़ाया जा सकता है। या, एक विकल्प के रूप में, आप तत्व के आईडी या अर्थात् कक्षाओं का उपयोग करके अपने स्वयं के कस्टम सीएसएस नियम जोड़ सकते हैं।

अतिरिक्त पठन:

• An Introduction To Object Oriented CSS (OOCSS)
• OOCSS + Sass = The best way to CSS