ऑब्जेक्ट ओरिएंटेड सीएसएस: कैची बज़-वाक्यांश या वैध डिजाइन दृष्टिकोण?

Question

ऐसा लगता है कि वेब विकास क्षेत्र में उभरते हुए एक नया पकड़-वाक्यांश है: ऑब्जेक्ट-ओरिएंटेड सीएसएस।

इसके चेहरे पर, यह मुझे एक आकर्षक नारे में पैक किया गया सर्वोत्तम अभ्यास होने के रूप में हमला करता है। मैं आंदोलन के पीछे के इरादों को समझता हूं और पूरी तरह से सम्मान करता हूं, लेकिन क्या इसके लिए और कुछ है?

किसी को भी किसी भी आगे की जानकारी है कि इस दृष्टिकोण अधिक विश्वसनीय कुछ के रूप में अलग करता है या मैं सिर्फ यकीन है कि मैं वारिस बनाने के लिए और सही ढंग से मेरी कक्षाओं झरना एक चेतावनी के रूप में यह रखना चाहिए है?

Answer 1

मैं कहूंगा कि यह सीएसएस में पहले से मौजूद कुछ के लिए एक आकर्षक buzz-phrase है। बेशक, हम ओओ के बारे में बात करना शुरू करने से पहले और क्या नहीं है और कैसे सीएसएस ऑब्जेक्ट उन्मुख है, हमें यह परिभाषित करना होगा कि वास्तव में यह क्या है - जो कुछ दूसरों के साथ पहले से संघर्ष कर रहा है और गर्म बहस के अधीन है।लेकिन अगर हम मान लेते हैं कि the basic principles of OO are:

• कक्षा
• वस्तु
• उदाहरण
• विधि
• संदेश गुजर
• विरासत
• अमूर्त
• Encapsulation
• Polymorph वाद
• Decoupling

हम कह सकते हैं, कि व्यापक स्टाइल शीट्स कुछ हद तक वस्तु उन्मुख कर रहे हैं, क्योंकि वे (एक तत्व के लिए एक वर्ग बताए द्वारा) बनाया उदाहरणों से परिभाषित करने की कक्षाएं,/वस्तुओं की अनुमति देते हैं, कक्षाओं की विरासत (यहां तक ​​कि एकाधिक विरासत), अमूर्तता (उदाहरण के लिए सादा तत्वों के लिए शैलियों को परिभाषित करके) और बहुरूपता (विभिन्न तत्वों के लिए समान वर्ग नाम को परिभाषित करके)। निश्चित रूप से सीएसएस की स्थैतिक प्रकृति की वजह से विधियों/संदेश गुजरना संभव नहीं है।

तो आम तौर पर मैं इसे ऑब्जेक्ट उन्मुख तरीके से सीएसएस विकसित करने के लिए एक वैध दृष्टिकोण कहूंगा, लेकिन मैं इसे वास्तव में ऑब्जेक्ट ओरिएंटेड सीएसएस नहीं कहूंगा, क्योंकि कम से कम मेरे लिए, यह सीएसएस के लिए गहराई से कुछ है। यह कुछ हद तक कहने जैसा होगा "मैं ऑब्जेक्ट ओरिएंटेड जावा कर रहा हूं ..."

Answer 2

कैची buzz-phrase और वैध डिजाइन दृष्टिकोण।

हालांकि मुझे लगता है कि विचारों में से कुछ एक सा है कि में अनुभवहीन देखते हैं वे "ग्राहक eveything में परिवर्तन के रूप में यह हो जाता है" वेब विकास प्रतिमान भूल जाते हैं।

Answer 3

इसकी वास्तव में टेबल divs आदि आदि

मेरी राय में बनाम की तरह उन बहस का मुद्दा चीजों में से एक, डेवलपर्स OO में इतना आरोपित है कि वे सब कुछ है, पहले जावास्क्रिप्ट और अब सीएसएस पर यह छड़ी करने की कोशिश का एक बहुत theres। मुझे गलत न करें जावास्क्रिप्ट में ओओ के तत्व भी हैं, लेकिन मैं digress।

के बाद से सीएसएस पहले से ही अपने आप में एक मूलमंत्र है (सभी नियोक्ताओं वेब 2.0 सीएसएस दृष्टिकोण चाहते हैं) नई डेवलपर्स के एक बहुत यह खोज कर रहे हैं। यह एक बुरी बात नहीं है, हालांकि डेवलपर्स के रूप में उन्होंने जो किया वह सबसे अच्छा किया और सीएसएस पर सुधार करने की कोशिश की। एक डेवलपर्स दिमाग में (मैं एक डेवलपर हूं) ओओ सिद्धांतों के अनुसार सीएसएस का आयोजन पूर्ण ज्ञान बनाता है - इसलिए नया buzzword।

अंत में मैं क्या कहने की कोशिश कर रहा हूँ कि OO सीएसएस सिर्फ एक दृष्टिकोण है कि कुछ लोग, ले, क्योंकि यह अधिक तार्किक लगता है। यदि आप सीएसएस लिख रहे हैं जो डेवलपर्स द्वारा बनाए रखा जा रहा है तो यह दृष्टिकोण अच्छी तरह से अनुकूल होगा। यह वास्तव में आपके पास आता है कि आप अपना सीएसएस और अपनी व्यक्तिगत शैली कैसे लिखते हैं ...

व्यक्तिगत रूप से मुझे परवाह नहीं है कि लोग अपने सीएसएस कैसे लिखते हैं - अगर यह मेरे बनाए रखने के लिए मुझ पर पड़ता है, तो फायरबग नौकरी को तुच्छ बनाता है ।

Answer 4

मैं साल के लिए यह कह दिया गया है।

सीएसएस चयनकर्ता उदाहरण आईडी और कक्षाओं पर आधारित हैं। यह कई विरासत का भी समर्थन करता है। यह कितना स्पष्ट हो सकता है?

ऑब्जेक्ट शर्तों में सीएसएस की सोच की सुंदरता यह है कि यह आपके मार्क-अप तत्वों को "कास्टिंग" शुरू करने के लिए बहुत सरल हो जाता है। उस div की अचानक अचानक INOTRendered बनने की आवश्यकता है? बस जेएस को .removed से मेल खाने के लिए अपनी क्लास एट्रिब्यूट का विस्तार करने दें, शैली गुणों के साथ गड़बड़ न करें।

जाहिर है कि एक काफी घिसे-पिटे उदाहरण है, लेकिन लाभ स्पष्ट किया जाना चाहिए - विशेष रूप से जे एस हेरफेर के संदर्भ में। आप जेएस को वास्तविक शैलियों से संशोधित कर सकते हैं, जो कि संशोधित करना है, जो रखरखाव और अमूर्त बोनस दोनों है, लेकिन इसमें बहुत अधिक विशिष्टता शैलियों को सीधे सेट नहीं करने जैसे फायदे हैं (जो सीएसएस ओवरराइड नहीं कर सकता है)।

Answer 5

मुझे लगता है कि इसे "ऑब्जेक्ट-ओरिएंटेड सीएसएस" कहने की गूढ़ता वास्तव में इसकी उपयोगिता और अवधारणा को व्यापक रूप से अपनाने से अलग हो रही है।

जब मैं इसे पढ़ता हूं, तो मुझे लगता है कि यह दावा है कि यह ओओ वास्तव में मेरी समझ को धीमा कर देता था।

जो लोग जानते हैं कि "ऑब्जेक्ट उन्मुख" प्रोग्रामिंग में क्या मतलब है, यह संदेहजनक होगा, क्योंकि यह वास्तव में ओओ है, है ना? यह अपनी दक्षता में सुधार के लिए सीएसएस को कुछ ओओ सिद्धांतों को लागू करने का प्रयास है। और दूसरी तरफ, अधिकांश क्लाइंट-साइड डेवलपर्स अवधारणा को समझ नहीं पाएंगे, अगर वे प्रोग्रामर नहीं हैं, और इसलिए वे केवल परेशान या शर्मिंदा होंगे।

तो, महान अवधारणा को पुन: ब्रांडिंग की आवश्यकता है। अधिकतम सीएसएस! पावर सीएसएस! सीएसएस पुनर्जन्म! सीएसएस स्क्वायर! सीएसएस प्राइम! ऐसा कुछ।

Answer 6

सीएसएस कई मायनों में OO भाषाओं के समान है: लिखने

p { color: red } 
p span { color: blue } 

और आप अनिवार्य रूप से विरासत है। यहाँ टेरियर का विस्तार कुत्ते पशु कक्षाओं का विस्तार होने के साथ और अधिक जटिल उदाहरण है:

.animal { font-weight:bold; color: blue; } 
.dog:before, .terrier:before { content: "GRRR"; } 
.animal, .dog, .terrier { color: brown } 

अब आप एक OO ढंग से कक्षाएं पशु, कुत्ते और टेरियर उपयोग कर सकते हैं।

यह याद रखना महत्वपूर्ण है कि सीएसएस को उस समस्या को हल करने में बहुत अच्छा है जो इसे पारदर्शी तरीके से तत्वों के लिए शैलियों को निर्दिष्ट करता है। क्या यह अधिक ओओ अवधारणाओं के साथ बेहतर हो सकता है? मुझे यकीन नहीं है।के किसी मान लीजिए कहते हैं:

@class dog @derives_from animal /* the syntax i just invented */ 
@class terrier @derives_from dog 

.animal { font-weight:bold; color: blue; } 
.dog:before { content: "GRRR"; } 
.terrier { color: brown } 

यह सरल दिखता है, लेकिन एक और भी सरल समाधान है, जबकि किसी भी 'टेरियर' को 'कुत्ता' जोड़ने @class बात ड्रॉप करने के लिए है और यदि ऐसा देखा सीएसएस फ़ाइल सरल होगा 'पशु' किसी भी 'कुत्ते' सर्वर-साइड (तुच्छ प्रतिस्थापन कथन) या जावास्क्रिप्ट के साथ।

सीएसएस बारे में सबसे अच्छी बात यह है कि यह आसान है और इसे वापस आसानी से हो जाता है, जिसका अर्थ है ब्राउज़रों सीएसएस वे समझ में नहीं आता है और चीजें काफी ठीक बाहर काम करता है व्याख्या करने के लिए की जरूरत नहीं है है। चूंकि आपको प्रमुख नई सीएसएस संरचनाओं के साथ इस पिछड़े संगतता को तोड़ना होगा, मुझे लगता है कि यह वस्तु-उन्मुख सीएसएस को एक बज़ वाक्यांश के अधिक बनाता है।

Answer 7

इन सभी वर्षों बाद पोस्टरिटी के लिए यह उत्तर लिखना। उपर्युक्त सभी उत्तरों ने ऑब्जेक्ट उन्मुख सीएसएस की गंभीर बात कभी नहीं सुना है। जब ओपी ने पूछा कि क्या यह एक गूढ़ शब्द था, तो यह संकेत होना चाहिए था कि अभिव्यक्ति उस विषय को संदर्भित करती है जो विवादास्पद वार्तालाप (ऑब्जेक्ट उन्मुख द्वारा हमारा क्या मतलब है? ")।

आपत्ति की उन्मुखी सीएसएस एक शब्द मेरा मानना ​​है कि याहू सामने के अंत तकनीक प्रचारक निकोल सुलिवान द्वारा गढ़ा गया था है, के बाद वह स्लिमर और अधिक प्रबंधनीय कुछ में अपने प्रस्तुतिकरण सामने के अंत कोड पुनर्रचना में फेसबुक के लिए परामर्श है कि अभी तक बढ़ाया जा सकता है और समय बीतने के साथ आसानी से संशोधित किया गया। 'ऑब्जेक्ट-ओरिएंटेड' शब्द का अर्थ सीएसएस की प्रकृति (जैसे) के रूप में नहीं है, लेकिन सीएसएस और प्रभावित मार्कअप लिखने के दृष्टिकोण के लिए जो एकता और विस्तारशीलता को उधार देता है।

OO सीएसएस के कुछ उदाहरण सिद्धांतों में शामिल हैं:

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

अंततः OOCSS के लक्ष्य को सूखा है। जब आप अनिवार्य रूप से समान चीजों की विविधता बनाते हैं तो आपको हजारों सीएसएस सीएसएस नहीं लिखनी चाहिए।

निकोल इस विषय पर कुछ good talks दिया है - वह भी कुछ useful techniques पर विस्तार कुछ लेख bad practices लिखा है रोजगार और से बचने के लिए।

'OOCSS' भी framework वह लिखा है कि एक्सटेंसिबल सीएसएस लेआउट के लिए कुछ बॉयलरप्लेट कोड देता है का नाम है। यह ढांचा कितना अच्छा और क्यों है (grids module कुछ ऐसा है जो मैं लगभग हर जगह उपयोग करता हूं) कोड से पूरी तरह से स्पष्ट नहीं है, और पीछे के विचारों पर उनके ब्लॉग पोस्ट पर पढ़ने से निश्चित रूप से इसका बेहतर उपयोग करने में मदद मिलेगी और सामान्य रूप से सीएसएस।

Answer 8

शब्द "वस्तु उन्मुख सीएसएस" एक मिथ्या नाम है।

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

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

Cascade Framework इस दृष्टिकोण के आधार पर एक नया सीएसएस ढांचा है। यह आपको केवल एक छोटे पदचिह्न के साथ इष्टतम प्रदर्शन, इष्टतम लचीलापन और इष्टतम मॉड्यूलरिटी देता है।

Answer 9

मैं ओओसीएसएस और बीईएम दोनों को शर्मिंदा कर रहा हूं। कुछ समय के लिए सम्मेलन नामकरण और कभी वापस देखो नहीं होगा। उन लोगों के लिए जो दावा कर रहे हैं कि यह सिर्फ "आकर्षक buzz-word" या "सीएसएस पहले से ही यह सामान करता है", इन दोनों पद्धतियों का उपयोग करके सीएसएस लिखने की क्षमता को समझ में नहीं आता है।

आइए वस्तुओं की सबसे सरल, लिंक के साथ एक सूची देखें। यह कई अलग अलग जायके में आता है:

1. मेनू

2. उपकरण पट्टियाँ

3. टैब्स

4. पैनलों (बूटस्ट्रैप)

OOCSS में, हम आम लगता है इनमें से प्रत्येक के गुण और आधार वस्तु बनाते हैं । मैं आमतौर पर इसे नौसेना कहते हैं।

/* Nav 
    =================================================*/ 

    /* B 
     ---------------------------------------------*/ 

     .nav 
     { 
      margin-left:   0; 

      padding-left:   0; 

      list-style:    none; 
     } 

    /* E 
     ---------------------------------------------*/ 

     .nav__item 
     { 
      float:     left; 
     } 

     .nav__link 
     { 
      display:    block; 

      color:     inherit; 

      text-decoration:  none; 
     } 

    /* M 
     ---------------------------------------------*/ 

     .nav--right 
     { 
      float:     right; 
     } 

     .nav--stack .nav__item 
     { 
      float:     none; 
     } 

आप कुछ चीज़ों पर ध्यान देगा:

1. नव आधार वस्तु ब्लॉक तत्व

2. बाल तत्वों nav_

3. संशोधक लगी होती हैं पर लागू होने वाले है एनवी के साथ prefixed हैं -

4. एक संशोधक एक विकल्प है जो व्यवहार को बदलता है। उदाहरण के लिए - सीधे सही नौसेना तैरता है।

एक बार जब मेरा मूल वस्तु विचित्र हो जाए, तो मैं खाल बना देता हूं जो वस्तु की उपस्थिति को बदल देगा। यह इसे टूलबार, टैब इत्यादि में बदल देगा। माइक्रोसॉफ्ट के पास अपने फोन पर पिवोट टैब हैं। अब एफपीआर बनाने के लिए यह एक आसान त्वचा है।

/* Nav 
    =================================================*/ 

    /* E 
     ---------------------------------------------*/ 

     .pivot .nav__item 
     { 
      margin-left:   24px; 

      color:     #aaa; 

      font-size:   36px; 
     } 

     .pivot .nav__item--active, .pivot .nav__item:hover 
     { 
      color:     #000; 
     } 

इस वस्तु और त्वचा का उपयोग करने के लिए आपको अपने स्थान स्वतंत्रता की वजह से

<ul class="pivot nav"> 

    <li class="nav__item"> 

     <a class="nav__link"> Item 1 </a> 

    </li> 

    <li class="nav__item"> 

     <a class="nav__link"> Item 2 </a> 

    </li> 

</ul> 

लिखते थे, आप भी यह के रूप में

<nav class="pivot nav"> 

    <div class="nav__item"> 

     <a class="nav__link"> Item 1 </a> 

    </li> 

    <div class="nav__item"> 

     <a class="nav__link"> Item 2 </a> 

    </div> 

</nav> 

अंत में लिख सकते हैं, आप कंटेनर को अलग कर रहे हैं त्वचा से मैं निकोल सुलिवान मीडिया ऑब्जेक्ट के साथ छोटे से शुरू करने का सुझाव दूंगा। अधिक प्रेरणा के लिए ट्विटर बूटस्ट्रैप और Inuit.css पर एक नज़र डालें।

Answer 10

मुझे विश्वास नहीं है, इसके लिए बहुत कुछ नहीं है।

OOCSSऑब्जेक्ट ओरिएंटेड व्यापक स्टाइलशीट

यह फिर से अधिक से अधिक दोहराने के लिए कोड को कम कर देता है और आप एक बार foocontainer के लिए एक वैश्विक सीएसएस सेट और हर जगह पुन: उपयोग और headerbody और footer के लिए कस्टम शैली हो सकता है।

<div class="foocontainer header"> Your header </div> <!-- two classes --> 
<div class="foocontainer body"> Your body </div> <!-- two classes --> 
<div class="foocontainer footer> Some footer </div> <!-- two classes --> 

---

कार्यलयब्लॉक - Element__Modifier

यह कोड को पढ़ने के लिए आसान है, लेकिन लिखने के लिए बदसूरत रहता है और आप आसानी से अपने माता-पिता के साथ बच्चों की पहचान कर सकते हैं।

<div class="foocontainer--header"> Your header </div> <!-- one class --> 
<div class="foocontainer--body"> Your body </div> <!-- one class --> 
<div class="foocontainer--footer> Some footer </div> <!-- one class -->