ऑब्जेक्ट-ओरिएंटेड CSS (OOCSS) की मूल बातें
हर साल कई नई तकनीकों के साथ फ्रंटेंड डेवलपमेंट तेजी से आगे बढ़ता है। यह डेवलपर्स के लिए एक संघर्ष हो सकता है कि वे सब कुछ साथ रखें। Sass और PostCSS के बीच विकास साधनों के समुद्र में खो जाना आसान है.
एक नई तकनीक ऑब्जेक्ट-ओरिएंटेड सीएसएस है, जिसे संक्षेप में OOCSS भी कहा जाता है। यह एक उपकरण नहीं है, बल्कि एक सीएसएस लेखन पद्धति है जिसका उद्देश्य है CSS modular और object-based बनाते हैं.
इस पोस्ट में, मैं शुरू करना चाहते हैं OOCSS के मूल आधार, तथा इन विचारों को वेब के काम पर कैसे लागू किया जा सकता है. यह तकनीक प्रत्येक डेवलपर के साथ नहीं पकड़ सकती है, लेकिन यह तय करने के लिए नई अवधारणाओं को समझने के लायक है कि क्या आपके वर्कफ़्लो को इससे फायदा हो सकता है.
सीएसएस ऑब्जेक्ट ओरिएंटेड बनाता है?
ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग (OOP) एक प्रोग्रामिंग प्रतिमान है जिस पर ध्यान केंद्रित किया जाता है पुन: प्रयोज्य वस्तुओं का निर्माण तथा संबंध स्थापित करना उनके बीच, प्रक्रियात्मक प्रोग्रामिंग के विपरीत, जो कोड को प्रक्रियाओं में व्यवस्थित करता है (दिनचर्या, सबरूटीन्स, या फ़ंक्शंस).
दोनों में ओओपी का व्यापक रूप से उपयोग किया गया है जावास्क्रिप्ट और भाषाओं का समर्थन पिछले कुछ वर्षों में, लेकिन अपने सिद्धांतों के अनुसार सीएसएस का आयोजन अभी भी एक नई अवधारणा है.
“वस्तु” OOCSS में एक को संदर्भित करता है HTML तत्व या इससे जुड़ी कोई भी चीज़ (जैसे CSS क्लास या जावास्क्रिप्ट मेथड)। उदाहरण के लिए, आपके पास एक साइडबार विजेट ऑब्जेक्ट हो सकता है जिसे विभिन्न प्रयोजनों (न्यूज़लेटर साइनअप, विज्ञापन ब्लॉक, हाल के पोस्ट आदि) के लिए दोहराया जा सकता है। सीएसएस कर सकते हैं इन वस्तुओं को लक्षित करें जो एक हवा को स्केलिंग बनाता है.
OOCSS 'गिटहब प्रविष्टि का सारांश, एक सीएसएस वस्तु में चार चीजें हो सकती हैं:
- DOM का HTML नोड (ओं) को
- उन नोड्स की शैली के बारे में सीएसएस घोषणाएं
- पृष्ठभूमि छवियों की तरह घटक
- जावास्क्रिप्ट व्यवहार, श्रोताओं, या किसी वस्तु से जुड़े तरीके
आमतौर पर, सीएसएस वस्तु-उन्मुख होता है जब वह विचार करता है कक्षाएं जो पुन: प्रयोज्य हैं तथा कई पृष्ठ तत्वों के लिए लक्षित.
कई डेवलपर्स कहते हैं कि OOCSS दूसरों के साथ साझा करना आसान है और निष्क्रिय विकास के महीनों (या वर्षों) के बाद लेने के लिए आसान है। यह SMACSS जैसे अन्य मॉड्यूलर तरीकों की तुलना करता है, जिसमें सीएसएस में वस्तुओं को वर्गीकृत करने के लिए सख्त नियम हैं.
यदि आप अधिक जानने के लिए उत्सुक हैं तो OOCSS FAQ पृष्ठ में जानकारी का एक समूह है। और निर्माता निकोल सुलिवन अक्सर ओओसीएसएस के बारे में बात करते हैं और यह आधुनिक वेब विकास के साथ कैसे संबंध रखता है.
शैली से अलग संरचना
OOCSS का एक बड़ा हिस्सा कोड लिख रहा है जो पृष्ठ संरचना (चौड़ाई, ऊंचाई, मार्जिन, पैडिंग) को उपस्थिति (फोंट, रंग, एनिमेशन) से अलग करता है। यह अनुमति देता है कस्टम स्किनिंग एकाधिक पृष्ठ तत्वों पर लागू किया जाएगा संरचना को प्रभावित किए बिना.
यह उन घटकों को डिजाइन करने के लिए भी उपयोगी है जो हो सकते हैं लेआउट के आसपास चले गए आसानी से। उदाहरण के लिए, ए “हाल के पोस्ट” साइडबार में विजेट समान शैलियों को बनाए रखते हुए पाद या सामग्री के ऊपर जंगम होना चाहिए.
यहाँ OOCSS का एक उदाहरण है a “हाल के पोस्ट” विजेट जो इस मामले में हमारी सीएसएस वस्तु है:
/ * संरचना * /।-विजेट-विजेट चौड़ाई: 100%; गद्दी: 10px 5px; / * स्किनिंग * / .सेंट-पोस्ट्स फ़ॉन्ट-परिवार: हेल्वेटिका, एरियल, संस-सेरिफ़; रंग: # 2 बी 2 बी 2 बी; font-size: 1.45em;
नोटिस जो ख़ाका के साथ प्रबंधित किया जाता है .पक्ष विजेट वर्ग है कि कई साइडबार तत्वों के लिए लागू किया जा सकता है, जबकि दिखावट के साथ प्रबंधित किया जाता है .हाल के पोस्ट वर्ग है कि अन्य विगेट्स त्वचा के लिए भी इस्तेमाल किया जा सकता है। उदाहरण के लिए, यदि .हाल के पोस्ट विजेट को पाद लेख में ले जाया गया, यह एक ही स्थिति नहीं ले सकता है, लेकिन यह समान रूप और दृश्य हो सकता है.
इसके अलावा CodePen के इस साइडबार उदाहरण पर एक नज़र डालें। यह फ़्लोट्स और पाठ संरेखण के लिए वर्गों के एक अलग पृथक्करण का उपयोग करता है ताकि प्रतिकृति को अतिरिक्त सीएसएस कोड की आवश्यकता नहीं होगी.
कंटेंट से अलग कंटेनर
इसके कंटेनर तत्व से अलग सामग्री OOCSS का एक और महत्वपूर्ण सिद्धांत है.
सरल शब्दों में, इसका मतलब केवल यह है कि जब भी संभव हो आप बच्चे के चयनकर्ताओं का उपयोग करने से बचें। एंकर लिंक, हेडर, ब्लॉकक्वाट, या अनऑर्डर की गई सूचियों जैसे किसी भी अनूठे पेज एलिमेंट्स को कस्टमाइज़ करते समय, आपको उन्हें सेलेक्टर्स के बजाय यूनिक क्लासेस देना चाहिए.
यहाँ एक सरल उदाहरण दिया गया है:
/ * OOCSS * / .sidebar / * साइडबार सामग्री * / h2.sidebar-title / * विशेष h2 तत्व शैलियाँ * / / * गैर-OOCSS * / .sidebar / * एक ही साइडबार सामग्री / / .sidebar h2 / * आवश्यकता से अधिक विशिष्टता जोड़ता है * /
हालाँकि यह दूसरे कोड प्रारूप का उपयोग करने के लिए भयावह नहीं है, लेकिन यदि आप स्वच्छ OOCSS लिखना चाहते हैं, तो पहले प्रारूप का पालन करना बहुत अधिक अनुशंसित है।.
विकास संबंधी दिशा-निर्देश
डेवलपर्स के उद्देश्यों पर लगातार बहस हो रही है, क्योंकि सटीक विनिर्देशों को खत्म करना कठिन है। लेकिन यहाँ हैं कुछ सुझाव जो आपको क्लीनर OOCSS कोड लिखने में मदद कर सकते हैं:
- के साथ काम आईडी के बजाय कक्षाएं स्टाइल के लिए.
- की कोशिश बहु-स्तरीय वंशज वर्ग विशिष्टता से परहेज जब तक जरूरत न हो.
- परिभाषित करें दोहराने योग्य कक्षाओं के साथ अनूठी शैली (उदाहरण के लिए फ्लोट, क्लीयरफिक्स, अद्वितीय फ़ॉन्ट स्टैक).
- तत्वों का विस्तार करें लक्षित वर्गों के साथ माता-पिता की कक्षाओं के बजाय.
- अपनी स्टाइलशीट व्यवस्थित करें वर्गों में, सामग्री की तालिका जोड़ने पर विचार करें.
ध्यान दें कि डेवलपर्स को अभी भी जावास्क्रिप्ट लक्ष्यीकरण के लिए आईडी का उपयोग करना चाहिए, लेकिन उन्हें सीएसएस के लिए आवश्यक नहीं है क्योंकि वे बहुत विशिष्ट हैं. यदि कोई ऑब्जेक्ट CSS स्टाइलिंग के लिए एक आईडी का उपयोग करता है तो इसे कभी भी दोहराया नहीं जा सकता क्योंकि आईडी अद्वितीय पहचानकर्ता हैं। यदि आप स्टाइल के लिए केवल कक्षाओं का उपयोग करते हैं वंशानुक्रम की भविष्यवाणी करना बहुत आसान हो जाता है.
इसके अलावा, अतिरिक्त सुविधाओं के लिए कक्षाओं को एक साथ जंजीर से जोड़ा जा सकता है। एक एकल तत्व में 10 + कक्षाएं जुड़ी हो सकती हैं। जबकि एक तत्व पर 10 + कक्षाएं कुछ ऐसा नहीं है जिसे मैं व्यक्तिगत रूप से सुझाऊंगा, यह डेवलपर्स को असीमित पृष्ठ तत्वों के लिए पुन: प्रयोज्य शैलियों के पुस्तकालय को इकट्ठा करने की अनुमति देता है।.
OOCSS के भीतर वर्ग के नाम कुछ विवादास्पद हैं, और पत्थर में सेट नहीं हैं। कई डेवलपर्स कक्षाओं को छोटी और बिंदु तक रखना पसंद करते हैं.
उदाहरण के लिए ऊंट का मामला भी लोकप्रिय है .errorBox के बजाय .त्रुटि बॉक्स. यदि आप OOCSS के प्रलेखन में वर्ग के नामकरण को देखते हैं तो आप देखेंगे कि ऊंट का मामला है “आधिकारिक” सिफ़ारिश करना। डैश के साथ कुछ भी गलत नहीं है, लेकिन एक नियम के रूप में यह OOCSS दिशानिर्देशों का पालन करना सबसे अच्छा है.
OOCSS + सास
अधिकांश वेब डेवलपर्स पहले से ही सैस को प्यार करते हैं और यह जल्दी से फ्रंटेंड समुदाय से आगे निकल गया है। यदि आपने पहले ही सैस की कोशिश नहीं की है, तो यह एक शॉट देने के लायक है। यह आपको गणितीय कार्यों जैसे चर, कार्यों, घोंसले के शिकार और संकलन विधियों के साथ कोड लिखने की अनुमति देता है.
सक्षम हाथों में, सैस और OOCSS स्वर्ग में बनाया गया मैच हो सकता है। आपको द सस वे ब्लॉग पर इस बारे में एक उत्कृष्ट लेखन मिलेगा.
उदाहरण के लिए, सैस का उपयोग करना @extend निर्देश आप एक वर्ग के गुणों को दूसरे वर्ग पर लागू कर सकते हैं। संपत्तियों की नकल नहीं की जाती है, लेकिन इसके बजाय, दो वर्गों को एक अल्पविराम चयनकर्ता के साथ जोड़ा जाता है। इस तरह से आप एक ही स्थान पर CSS संपत्तियों को अपडेट कर सकते हैं.
यदि आप लगातार स्टाइलशीट लिख रहे हैं तो इससे बचत होगी टाइपिंग के घंटे और मदद करें OOCSS प्रक्रिया को स्वचालित करें.
यह भी याद रखें कोड रखरखाव OOCSS का एक बड़ा हिस्सा है. Sass का उपयोग करके, वर्कफ़्लो में बंधे हुए चर, मिश्रण और उन्नत लाइनिंग टूल के साथ आपकी नौकरी आसान हो जाती है.
महान OOCSS कोड की एक प्रमुख विशेषता है किसी के साथ भी इसे साझा करने की क्षमता, अपने आप को बाद की तारीख में भी, और आसानी से उठा सकते हैं.
प्रदर्शन के विचार
OOCSS सुचारू रूप से और बहुत भ्रम के बिना संचालित करने के लिए है। डेवलपर्स अपनी पूरी कोशिश करते हैं नहीं हर मोड़ पर खुद को दोहराना, वास्तव में यह DRY विकास के पीछे का आधार है। समय के साथ, OOCSS तकनीक किसी दिए गए दस्तावेज़ में दर्जनों बार लागू की गई व्यक्तिगत संपत्तियों के साथ सैकड़ों सीएसएस कक्षाएं ले सकती है.
चूंकि OOCSS अभी भी एक नया विषय है, इसलिए ब्लोट के विषय पर बहस करना मुश्किल है। कई सीएसएस फाइलें छोटी संरचना के साथ समाप्त हो जाती हैं, जबकि OOCSS कठोर संरचना और (आदर्श रूप से) कम ब्लोट प्रदान करता है। सबसे बड़ी प्रदर्शन चिंता HTML में होगी जहां कुछ तत्व लेआउट संरचना और डिजाइन के लिए विभिन्न वर्गों के एक मुट्ठी भर जमा कर सकते हैं.
आपको स्टैक ओवरफ्लो और सीएसएस-ट्रिक्स जैसी साइटों पर इस विषय के बारे में दिलचस्प चर्चा मिलेगी.
मेरी सिफारिश है कि एक नमूना परियोजना बनाने की कोशिश की जाए, और देखें कि यह कैसे जाती है। यदि आपको OOCSS से प्यार है, तो यह मौलिक रूप से बदल सकता है कि आप वेबसाइटों को कैसे कोडित करते हैं। वैकल्पिक रूप से, यदि आप इसे नफरत करते हैं तो आप अभी भी एक नई तकनीक सीख रहे हैं और इसके बारे में गंभीर रूप से सोच रहे हैं कि यह कैसे संचालित होता है। यह जीत-जीत है चाहे कोई भी हो.
व्यस्त लेखन OOCSS प्राप्त करें
वेब विकास में कुछ भी सीखने का सबसे अच्छा तरीका अभ्यास करना है। यदि आप पहले से ही सीएसएस की मूल बातें समझते हैं तो आप अपने रास्ते पर हैं!
चूंकि OOCSS को प्रीप्रोसेसिंग की आवश्यकता नहीं होती है इसलिए आप इसे एक ऑनलाइन IDE, जैसे कि CodePen के साथ आज़मा सकते हैं। आरंभ करने के लिए सरल परियोजनाएं सबसे अच्छी हैं, और वहां से अपने ज्ञान में सुधार करें.
OOCSS के विकसित क्षेत्र में अपने शोध को आगे बढ़ाने के लिए इन संसाधनों पर एक नज़र डालें.
- OOCSS आधिकारिक वेबसाइट
- ऑब्जेक्ट-ओरिएंटेड CSS: क्या, कैसे, और क्यों
- OOCSS + Sass = CSS का सबसे अच्छा तरीका
- ऑब्जेक्ट ओरिएंटेड सीएसएस का परिचय
