सीएसएस लेखन के तरीके को समझना

इस पोस्ट में हम देखने जा रहे हैं CSS लेखन के तरीके क्या हैं, कुछ अच्छी तरह से ज्ञात तरीके, और कैसे वे हमारे सीएसएस कोड को अनुकूलित करने में हमारे लिए उपयोगी हो सकते हैं। चलिए गेंद को लुढ़कने के लिए सबसे सरल प्रश्न से शुरू करते हैं। एक कार्यप्रणाली क्या है?

एक कार्यप्रणाली है तरीकों की एक प्रणाली. एक विधि के बारे में सोचें जैसे कि हम चाहते हैं कि परिणाम प्राप्त करने के लिए चीजों को करने के कुछ निश्चित तरीके से व्यवस्थित तरीके से कुछ किया जाए।.

बेहतर परिणाम पाने के लिए, हम बेहतर तरीके से योजना बनाकर अपने तरीकों में सुधार करते हैं, आदेश को बदलना, चरणों को सरल करना - जो भी काम करता है और तेज और अधिक है कुशल.

सीएसएस पद्धति

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

हमारे पसंदीदा तरीके या तो समय के साथ हमारे स्वयं के स्थापित किए गए हैं या दूसरों से प्रभावित हैं या हमारे कार्यस्थल में या उपरोक्त सभी के कारण आवश्यक हैं। लेकिन समय के साथ, सीएसएस के दिग्गजों ने तैयार किया है सीएसएस लिखने के तरीके वो ज्यादा हैं लचीला, परिभाषित, पुन: प्रयोज्य, समझने योग्य तथा प्रबंधनीय.

हम उन तैयार कार्यप्रणाली को देखने जा रहे हैं, जिनमें शामिल होंगे:

1. OOCSS (ऑब्जेक्ट ओरिएंटेड सीएसएस)
2. BEM (ब्लॉक, तत्व, संशोधक)
3. ACSS (परमाणु सीएसएस)
4. SMACSS (सीएसएस के लिए स्केलेबल और मॉड्यूलर आर्किटेक्चर)

ध्यान दें: नीचे उल्लिखित कोई भी अवधारणा किसी भी ढांचे, पुस्तकालय या उपकरण के साथ भ्रमित नहीं होनी चाहिए, जिसमें इन पद्धतियों के समान नाम और अवधारणा हो सकती है। यह पोस्ट केवल CSS लिखने के तरीके के बारे में है.

1. OOCSS

2008 में निकोल सुलिवन द्वारा विकसित, OOCSS (ऑब्जेक्ट ओरिएंटेड सीएसएस) की प्रमुख अवधारणाओं में सीएसएस शामिल है वस्तु पहचान, संरचना और दृश्य शैलियों को अलग करना और स्थान आधारित शैलियों से बचना.

OOCSS में, निकोल का प्रस्ताव है कि हम पहला कदम है CSS में वस्तुओं को पहचानें.

“असल में, एक सीएसएस "ऑब्जेक्ट" एक दोहराए जाने वाला दृश्य पैटर्न है, जिसे HTML, सीएसएस और संभवतः जावास्क्रिप्ट के एक स्वतंत्र स्निपेट में सार किया जा सकता है। उस ऑब्जेक्ट को फिर से एक साइट पर पुन: उपयोग किया जा सकता है। - निकोल सुलिवन, जीथुब (OOCSS)“

इस साइट से इस संरचना का उदाहरण लें। यहाँ कुछ ऐसा है जो एक दोहराव वाला दृश्य पैटर्न है और इसका अपना स्वतंत्र HTML और / या CSS है:

हमारे पास दो प्रकार की वस्तुएं हैं, शीर्षकों का एक बड़ा पूर्वावलोकन जो हम नाम देंगे बाद पूर्वावलोकन-प्राथमिक और शीर्षक के साथ एक साइडबार जिसे हम नाम देंगे बाद पूर्वावलोकन माध्यमिक.

हमारे लिए आवश्यक है अलग संरचना और त्वचा (अर्थात ऐसी शैलियाँ जो वस्तुओं के स्वरूप का निर्माण करती हैं)। दो प्रकार की वस्तुओं में अलग-अलग संरचनाएं होती हैं, एक बड़ी बॉक्स में होती है, भले ही वे समान दिखती हैं, बाईं ओर की छवियां और दाईं ओर शीर्षक.

आइए दोनों वस्तुओं की छवियों को एक वर्ग दें बाद पूर्वावलोकन छवि और उस कोड को जोड़ें जो छवि को बाईं ओर रखता है। यह सीएसएस में वस्तुओं के अंदर की छवि को रखने के लिए कोड को दोहराने से रोकता है। यदि अन्य समान वस्तुएं हैं, तो हम पुन: उपयोग करते हैं बाद पूर्वावलोकन छवि उनके लिए.

त्वचा की जुदाई भी सरल शैलियों की तरह की जा सकती है सीमा या पृष्ठभूमि. यदि आपके पास एक ही नीले बॉर्डर के साथ कई ऑब्जेक्ट हैं, नीली सीमा के लिए एक अलग वर्ग बनाना और इसे वस्तुओं में जोड़ना होगा नीले रंग की सीमाओं की संख्या को कम करना होगा सीएसएस में.

निकोल ने भी सुझाव दिया नहीं स्थान के आधार पर शैलियों को जोड़ें, उदाहरण के लिए, एक विशेष div के अंदर सभी लिंक को हाइलाइट करने के लिए लक्षित करने के बजाय, उन लिंक को a हाइलाइटर वर्ग उपयुक्त सीएसएस शैलियों के साथ। इस तरह जब आपको पृष्ठ के किसी अन्य भाग में लिंक को हाइलाइट करने की आवश्यकता होती है, तो आप हाइलाइटर वर्ग का पुन: उपयोग कर सकते हैं.

OOCSS के पेशेवरों: पुन: प्रयोज्य दृश्य स्टाइल कोड, स्थान लचीले कोड, गहरी नेस्टेड चयनकर्ताओं में कमी.

विपक्ष OOCSS के: दृश्य पैटर्न को दोहराने की एक उचित मात्रा के बिना, संरचना और दृश्य शैली कोड को अलग करना अनावश्यक लगता है.

2. बीईएम

2009 में यैंडेक्स में डेवलपर्स द्वारा विकसित, बीईएम (ब्लॉक, तत्व, संशोधक) के लिए मुख्य अवधारणाएं पहचानना शामिल हैं खंड, तत्त्व और संशोधक और उनके अनुसार नामकरण.

ए “खंड” अनिवार्य रूप से एक के रूप में ही है “वस्तु”(उदाहरण से पहले), ए “तत्त्व” ब्लॉक के घटकों को संदर्भित करता है (छवि, शीर्षक, उपरोक्त पाठ का पूर्वावलोकन करें पूर्वावलोकन पोस्ट- वस्तुओं)। ए “संशोधक” एक ब्लॉक या तत्व की स्थिति में परिवर्तन होने पर इस्तेमाल किया जा सकता है, उदाहरण के लिए जब आप इसे हाइलाइट करने के लिए मेनू आइटम में एक सक्रिय वर्ग जोड़ते हैं, तो सक्रिय वर्ग आपके संशोधक के रूप में कार्य करता है.

एक बार जब आप घटकों की पहचान कर लेते हैं, तो उनके अनुसार नाम दें। उदाहरण के लिए:

• एक मेनू ब्लॉक में कक्षा होगी मेन्यू
• इसकी वस्तुओं में कक्षा होगी मेनू आइटम (ब्लॉक और तत्व को डबल अंडरस्कोर द्वारा अलग किया जाता है)
• मेनू के विकलांग राज्य के लिए संशोधक वर्ग हो सकता है menu_disabled (एक एकल अंडरस्कोर द्वारा संशोधित संशोधक)
• एक मेनू आइटम की अक्षम स्थिति के लिए संशोधक हो सकता है menu__item_disabled.

संशोधक के लिए, हम भी उपयोग कर सकते हैं मौलिक मूल्य नामकरण के लिए प्रारूप। उदाहरण के लिए, अप्रचलित लेखों से लिंक करने वाले किसी भी मेनू आइटम को अलग करने के लिए, हम उन्हें कक्षा दे सकते हैं menu__item_status_obsolete, और लंबित दस्तावेजों को इंगित करने वाले किसी भी मेनू आइटम को स्टाइल करने के लिए, क्लास का नाम हो सकता है menu__item_status_pending.

नामकरण को आपके लिए काम करने के लिए संशोधित किया जा सकता है। विचार करने योग्य है वर्ग नामों से पहचान, ब्लॉक, तत्व और संशोधक. बीईएम साइट में सूचीबद्ध कुछ नामकरण प्रणाली की जाँच करें.

बीईएम की साइट भी सूचीबद्ध करती है कैसे ब्लॉक, तत्व और संशोधक अलगाव भी CSS फ़ाइल प्रणाली में लाया जा सकता है. जैसे ब्लॉक “बटन” तथा “आदानों” उन फ़ाइलों से युक्त अपने स्वयं के फ़ोल्डर हो सकते हैं (.css, .js) जो उन ब्लॉकों से जुड़े हैं, जो उन चीजों को आसान बनाते हैं जब हम उन ब्लॉकों को अन्य परियोजनाओं में आयात करना चाहते हैं.

बीईएम के पेशेवरों:वर्ग के नाम का उपयोग करने में आसान और गहरे CSS चयनकर्ताओं में कमी.

बीईएम की विपक्ष:नाम को समझदार बनाए रखने के लिए, BEM सलाह देता है कि हम ब्लॉक टू एलीमेंट नेस्टिंग उथले रखें.

3. ACSS

याहू द्वारा प्रसिद्ध, पहले के अंत के पास कहीं 21 का दशक^सेंट सदी, ACSS की प्रमुख अवधारणाओं में स्टाइल के सबसे अधिक परमाणु स्तर के लिए कक्षाएं बनाना शामिल है यानी एक संपत्ति-मूल्य जोड़ी, फिर उन्हें आवश्यकतानुसार HTML में उपयोग करना.

यह निर्धारित करना कठिन है कि ACSS (परमाणु सीएसएस) पहली बार विकसित किया गया था क्योंकि अवधारणा अब थोड़ी देर के लिए उपयोग में है। डेवलपर्स जैसे वर्गों का उपयोग कर रहे हैं .स्पष्ट अतिप्रवाह: छिपा हुआ लंबे समय के लिए। ACSS में विचार करना है बहुत अधिक हर पुन: प्रयोज्य गैर-सामग्री संबंधित संपत्ति-मूल्य जोड़ी के लिए एक वर्ग है हमें अपनी साइट में आवश्यकता होगी, और उन तत्वों को जोड़ने के लिए जब HTML तत्वों की आवश्यकता होगी.

नीचे एसीएसएस पर आधारित कक्षाओं का एक उदाहरण है और वे HTML में कैसे उपयोग किए जाते हैं.

 .mr-8 मार्जिन-राइट: 8px;; .fl-r फ्लोट: राइट;; 
 

जैसा कि आप देख सकते हैं, इस पद्धति के साथ कक्षाओं की संख्या अधिक हो जाएगी और HTML उन सभी वर्गों द्वारा भीड़ जाएगा। यह विधि 100% प्रभावी नहीं है, लेकिन यदि चाहें तो इसे उपयोगी बनाया जा सकता है। याहू यह सब के बाद का उपयोग करता है.

एसीएसएस के पेशेवरों:HTML छोड़ने के बिना HTML को स्टाइल करना.

एसीएसएस की विपक्ष:बहुत अधिक कक्षाएं, बहुत साफ-सुथरी नहीं हैं और आप इससे नफरत कर सकते हैं.

4. SMACSS

2011 में जोनाथन स्नूक एसएमएसीएसएस (सीएसएस के लिए स्केलेबल और मॉड्यूलर आर्किटेक्चर) द्वारा विकसित 5 अलग-अलग प्रकार के स्टाइल नियमों की पहचान करके काम करता है। इन्हीं के आधार पर क्लास के नाम और फाइलिंग सिस्टम बनाए जाते हैं.

“SMACSS आपकी डिजाइन प्रक्रिया की जांच करने का एक तरीका है और उन कठोर रूपरेखाओं को एक लचीली विचार प्रक्रिया में फिट करने का एक तरीका है। - जोनाथन स्नुक”

SMACSS 5 प्रकार के स्टाइल नियमों की पहचान करता है आधार, लेआउट, मॉड्यूल, राज्य, तथा विषय.

• बेस शैलियों मूलभूत HTML टैग्स पर निर्देशित डिफ़ॉल्ट शैलियाँ हैं

  , .

• लेआउट शैलियाँ पृष्ठ के लेआउट को परिभाषित करने के लिए उपयोग की जाने वाली शैलियाँ हैं, जैसे कोडिंग जहाँ हेडर, फ़ुटर और साइड मेनू जाएँगे.
• मॉड्यूल शैलियों गैलरी या स्लाइड शो जैसे एक मॉड्यूल के लिए विशिष्ट हैं.
• छिपी या अक्षम जैसे परिवर्तनशील राज्यों के साथ तत्वों को उजागर करने के लिए राज्य शैलियों हैं.
• पृष्ठ की दृश्य योजना को बदलने के लिए थीम का उपयोग किया जाता है.

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

SMACSS के पेशेवरों:बेहतर संगठित कोड.

SMACSS के विपक्ष: कोई नहीं मैं सोच भी नहीं सकता.

एक मुफ्त ऑनलाइन पुस्तक है जिसे आप SMACSS के बारे में पढ़ सकते हैं, या आप इसे और अधिक अध्ययन करने के लिए इसका ईबुक संस्करण खरीद सकते हैं.

निष्कर्ष

उपरोक्त सीएसएस कार्यप्रणाली आपको एक प्रणाली देगी अपने सीएसएस कोड का प्रबंधन और अनुकूलन करें. उन्हें आपकी आवश्यकताओं के अनुरूप OOCSS-SMACSS, या OOCSS-BEM, या BEM-SAMCSS जैसे एक साथ जोड़ा जा सकता है.

यदि आप CSS कार्यप्रणालियों को निष्पादित करने के लिए एक स्वचालित प्रणाली चाहते हैं तो फ्रेमवर्क और लाइब्रेरी भी हैं:

• OOCSS ढाँचा
• बीईएम उपकरण
• ऑर्गेनिक सीएसएस फ्रेमवर्क (परमाणु अवधारणा का अनुसरण करता है).