सीएसएस प्रारूपण गाइड

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

आइए मौजूदा स्वरूपण प्रथाओं को देखें।

लेकिन पहले ... हम पुस्तकालयों के बारे में बात नहीं करेंगे।

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

सूची

मैं नीचे पसंद किए गए कुछ बिंदुओं को सूचीबद्ध करूंगा।

Github

गिटहब सीएसएस प्रारूपण गाइड →

एक नियम के रूप में, आपको घोंसले के शिकार के 3 से अधिक स्तरों का उपयोग नहीं करना चाहिए। यदि आपने ऐसा किया है, तो आपको कोड को पुनर्गठित करने पर विचार करना चाहिए (विशिष्ट स्थितियों को छोड़कर या जब मार्कअप की आवश्यकता हो)

इकाइयों के बिना लाइन-ऊंचाई संपत्ति का उपयोग करें। इस मामले में, आप मूल तत्व से पंक्ति की ऊंचाई विरासत में नहीं लेंगे, यह स्वचालित रूप से ऊंचाई-गुणक के रूप में सेट किया जाएगा।

गूगल

Google HTML / CSS फॉर्मेटिंग गाइड →

जितना संभव हो सके कक्षाओं और आईडी का नाम दें, लेकिन जितना संभव हो उतना कम रखें।
उदाहरण के लिए, .nr के बजाय #navigation, .author के बजाय #nav का उपयोग करें

एक संघनन प्रतीक के रूप में, केवल एक हाइफ़न का उपयोग करें, अन्य विशेष वर्णों का उपयोग न करें। इससे कोड की पठनीयता और समझ में सुधार होगा।
उदाहरण के लिए, .demoimage या .demo_image के बजाय .demo- छवि

मुहावरेदार सीएसएस

निकोलस गलाघेर मुहावरेदार सीएसएस गाइड →

"छिपा वर्ण" प्रदर्शित करने के लिए अपना आईडीई सेट करें। यह आपको लाइनों के अंत में रिक्त स्थान को खत्म करने की अनुमति देगा, एक खाली लाइन में अनजाने रिक्त स्थान को खत्म करेगा, जिससे आपके आवागमन में कचरा खत्म हो जाएगा।

अल्पविरामों द्वारा अलग किए गए लंबे मान, जैसे कि ग्रेडिएंट या छाया के संग्रह, को कई लाइनों में विभाजित किया जा सकता है, इससे पठनीयता में सुधार होगा और कोड तुलना के लिए अधिक सुविधाजनक हो जाएगा।

विभिन्न घटकों के लिए अलग-अलग फ़ाइलों का उपयोग करें और उन्हें भवन चरण में एक में इकट्ठा करें।

सीएसएस जादूगर

हैरी रॉबर्ट → द्वारा सीएसएस प्रारूपण गाइड

मैंने CSS में ID का उपयोग पूरी तरह से छोड़ दिया है। उनका उपयोग करने से कोई मतलब नहीं है, साथ ही वे अक्सर समस्याओं का कारण बन जाते हैं।

कोड टिप्पणियों में, अनुभाग शीर्षक से पहले, मैं हमेशा $ वर्ण जोड़ता हूं। यह करने के लायक है क्योंकि जब मैं इस खंड को खोजता हूं, तो मैं इसे पा लूंगा (कीवर्ड द्वारा $ MAIN, न कि MAIN)।

ऐसी परिस्थितियों में जहां डेवलपर के लिए यह जानना उपयोगी होगा कि यह CSS कुछ HTML पर कैसे लागू किया जाता है, मैं अक्सर अपनी CSS टिप्पणी में HTML स्निपेट शामिल करता हूं।

महक पत्रिका

विटाली फ्रीडमैन द्वारा "सीएसएस फॉर्मेटिंग गाइड के साथ कोड की पठनीयता में सुधार करना →

बड़ी परियोजनाओं या बड़ी टीमों के लिए यह परिवर्तन लॉग रखने के लिए बहुत उपयोगी होगा।

कोड की बेहतर पठनीयता के लिए (यदि यह कोड का एक छोटा टुकड़ा है), तो इसे एक पंक्ति में लिखना बेहतर हो सकता है।

ThinkUp

थिंकअप सीएसएस फॉर्मेटिंग गाइड →

यदि चौड़ाई या ऊंचाई की संपत्ति का मूल्य 0 है, तो आपको इसे मापने की एक इकाई नहीं जोड़ना चाहिए।

चयनकर्ताओं के ब्लॉक पर टिप्पणियाँ जिस ब्लॉक को संदर्भित करती हैं, उसके तुरंत पहले एक अलग लाइन में होना चाहिए।

वर्डप्रेस

सीएसएस प्रोग्रामिंग मानक Wordpress → से

खंडों को अलग करने के लिए दो खाली लाइनों का उपयोग करें और खंडों में अलग ब्लॉकों के लिए एक खाली लाइन का उपयोग करें

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

मैजिक नंबर खराब हैं। उनका उपयोग एक बार के आधार पर त्वरित सुधार के रूप में किया जाता है।
उदाहरण के लिए: .box {मार्जिन-टॉप: 37 पीएक्स} ।

SMACSS

जोनाथन स्नूक → द्वारा सीएसएस के लिए स्केलेबल और मॉड्यूलर वास्तुकला

इस राक्षस के एक-दो उद्धरण फाड़ना मुश्किल होगा। लेकिन ...

हर बार जब आप फ़ाइल के अंत में एक नई शैली जोड़ते हैं, तो आप उसी प्रोजेक्ट पर काम करने वाले अन्य डेवलपर्स के जीवन को जटिल बनाते हैं। वहां खोजना कठिन होगा।

यदि सब कुछ सही ढंग से किया जाता है, तो मॉड्यूल को आसानी से दस्तावेज़ के किसी भी हिस्से में इसे तोड़ने के बिना स्थानांतरित किया जा सकता है।

केवल अर्थ तत्वों का उपयोग करें।

अधिक?

क्या आपका संगठन सार्वजनिक शैली प्रारूपण दिशानिर्देशों का उपयोग करता है? उन्हें साझा करें!

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