हैप्पी पॉटर और सीएसएस के आदेश

तो, सबसे पहले - यह एक आम लड़ाई नहीं है। यह CSS बनाम CSS-in-JS में नहीं है, atomic CSS बनाम BEM नहीं, LESS बनाम SASS । यह लड़ाई ORDER के बारे में है।

यह लड़ाई ORDER और CHAOS के बीच है। और ORDER और के बीच, ... एक और ORDER। संक्षेप में - सीएसएस गुणों को छाँटने के बेहतर तरीके के बारे में। न ज्यादा, न कम।

संक्षेप में - इसे करने के 3 तरीके हैं:

• यह मत करो। किसी भी CSS को जितना हो सके लिखें। यह सबसे लोकप्रिय तरीका है
• समूह गुण भाव से। बस कुछ सामान एक साथ रखें। यह काफी लोकप्रिय तरीका है।
• सभी गुणों को वर्णानुक्रम में क्रमबद्ध करें। सबसे आसान, लेकिन कम लोकप्रिय तरीका।

अब से पहले रास्ते के बारे में भूल जाते हैं। यह रास्ता नहीं है।

2012

सीएसएस-ट्रिक से एक अच्छा मतदान हुआ , और यहां परिणाम हैं:

यह 2019 पहले से ही है, क्या बदला गया था?

alpha sort , एबीसीएसएस के बीच का अंतर, जैसा कि ज्ञात है, और एक grouping काफी ध्वनि है, लेकिन इसे स्पष्ट करना बेहतर है

प्रारंभिक अवस्था

इस प्रिटियर मुद्दे से आइए एक आदर्श CHAOS से शुरू करते हैं

 .wrapper { top: 20px; /* is it absolute? fixed? You begin searching downwards */ margin-left: 20px; /* Any other margins applied? */ display: flex; /* How is this flexed? searching for justify / align / flex rules */ position: absolute; /* ah absolute */ height: 100%; /* and width? */ margin-bottom: 20px; border-radius: 5px; /* Is there even a border? */ color: red; justify-content: center; margin-left: 2px; left: 0px; width: 100%; /* and height? */ border: 1px solid red; } 

सुंदर? बिना किसी नियंत्रण के कुछ वर्षों के बाद सामान्य सीएसएस कैसा दिखता है।

ABCSS

इसे वर्णानुक्रम में क्रमबद्ध करें

 .wrapper { border: 1px solid red; border-radius: 5px; color: red; display: flex; height: 100%; justify-content: center; left: 0px; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; /* ouch? */ position: absolute; top: 20px; width: 100%; } 

इसने सिर्फ यह नोटिस करने में मदद की कि हमारे पास दो margin-lefts । अगली बार नई प्रॉपर्टी को जोड़ना आसान होगा, खासकर अगर सभी छंटाई stylelint स्तर पर स्वचालित रूप से की stylelint है।

वर्णमाला छँटाई का मुख्य लाभ - आसान संपत्ति स्थान। आप सिर्फ एक शब्दावली की तरह स्कैनिंग टेबल, और हां, यहाँ मैं देख रहा हूँ संपत्ति है।

मुख्य नुकसान - height width से पहले जाती है, left top से पहले जाती है और उनके बीच कुछ दूरी है। वर्णानुक्रमिक छँटाई संदर्भ मिश्रण है ।

मैंने इसे बनाने के लिए कुछ ऑनलाइन टूल का उपयोग किया है। ऑनलाइन टूल, IDEs और CLI टूल्स के लिए बड़ी मात्रा में अल्फ़ा बॉक्स के बाहर अल्फा सॉर्ट का समर्थन करते हैं। - उपयोग में आसान।

समूह

इसे समूहों में क्रमबद्ध करें

 .wrapper{ position: absolute; top: 20px; left: 0; display: flex; justify-content: center; width: 100%; height: 100%; margin-bottom: 20px; margin-left: 20px; margin-left: 2px; color: red; border: 1px solid red; border-radius: 5px; } 

इस बार यह separation of concerns बारे में अधिक है - सभी गुणों को एक अर्थ में बाल्टी में वर्गीकृत किया गया है। ऑर्डरिंग सिद्धांत को "आउटसाइड-इन" के रूप में जाना जाता है

• लेआउट गुण (स्थिति, फ्लोट, स्पष्ट, प्रदर्शन)
• बॉक्स मॉडल गुण (चौड़ाई, ऊंचाई, मार्जिन, पैडिंग)
• दृश्य गुण (रंग, पृष्ठभूमि, सीमा, बॉक्स-छाया)
• टाइपोग्राफी गुण (फ़ॉन्ट-आकार, फ़ॉन्ट-परिवार, पाठ-संरेखण, पाठ-परिवर्तन)
• विविध गुण (कर्सर, अतिप्रवाह, जेड-इंडेक्स)

और समस्या - इसके चारों ओर एक से अधिक मानक हैं। अधिक ठोस होने के लिए - पांच से अधिक। और यह एक समस्या है। या नहीं?

और, फिर भी - छँटाई एक उपकरण द्वारा किया जाता है, इस समय CSSCOMB ।

मुख्य लाभ - सभी गुणों को सामान्य ज्ञान द्वारा समूहीकृत किया जाता है। सभी फ्लेक्स गुण - एक साथ। सभी स्थिति, बाएं, दाएं, ऊपर, नीचे - एक साथ।

• यदि आपको कुछ जोड़ने की आवश्यकता है - कहीं जोड़ें और एक टूल को काम करने दें।
• अगर आपको कुछ खोजने की जरूरत है - एक समूह की तलाश करें, तो एक समूह के अंदर देखें। वैसे - यह पिछले मामले में रैखिक खोज की तुलना में तेज़ है।

इसके लिए कुछ स्पष्टीकरण की आवश्यकता है:

• अल्फा सॉर्ट के साथ - आप लाइन की एक शुरुआत के लिए देख रहे हैं, शुरुआत और "आपका" पहला अक्षर का अंत। तब आपको लगा कि यह सबब्लॉक है और यह पूरा हो गया है। वह मूल रूप से O (n) है। कुछ प्रशिक्षण के बाद - ओ (एन / 2), जब तक आप जानेंगे कि "कहां" एक प्रोप की तलाश में है।
• समूह सॉर्ट के साथ - आप जानते हैं कि "कहाँ" एक प्रोप की तलाश में है - समूहों में एक स्थिर स्थिति है, और फिर छोटे उपसमुच्चय के माध्यम से जाते हैं, और यह किया जाता है। वह मूल रूप से है - O (3), न कि "n"।

मुख्य नुकसान - आपको सीखना होगा कि कैसे कॉन्सर्स को अलग करना है। 99% उत्तरदाताओं ने कहा कि यह एक बड़ी समस्या है - समूहबद्ध सीएसएस लिखने के लिए, लेकिन यह एक उपकरण का काम है, आपका नहीं। और, हाँ, एक से अधिक मानक हैं, लेकिन यह तब समस्या नहीं है जब एक उपकरण द्वारा ऑर्डर किया जाता है।

जनमत

इसलिए, मैंने इस समस्या के आसपास कुछ शोध किया।

• 2012y, css-tricks ने बताया कि 45% devs समूहों का उपयोग करते हैं, 14 - अल्फा सॉर्ट, 39 कुछ भी उपयोग नहीं करते हैं
• जनमत सर्वेक्षण आज (और अभी तक समाप्त नहीं हुआ है) - समूहों के लिए 50%, अल्फा के लिए 25%, 25% कुछ भी उपयोग नहीं करते हैं

समूहों का उपयोग करने के सर्वोत्तम कारण:

• समूह चीजों को एक साथ रखने का सबसे स्वाभाविक तरीका है: यह वह तरीका है जो आपके लिखने का है। कल्पना कीजिए कि आपको वर्णमाला के क्रम में एक वाक्य में शब्द लिखना होगा। शीर्ष, दाएं, नीचे, बाएं स्वाभाविक रूप से एक साथ होते हैं, स्थिति के ठीक बाद: पूर्ण ( ट्विटर )।
• समूहों का एक अच्छा कारण परमाणु सीएसएस हो सकता है - परमाणु / उपयोगिता आमतौर पर एक "समूह" से बंधे होते हैं, यह कार्यात्मक रूपरेखा के लिए एक प्राकृतिक तरीका है। तो "सामान्य" सीएसएस संयुक्त परमाणुओं की तरह दिख सकता है - यानी समूहबद्ध ( ट्विटर )।
• छोटी टीमें एक साथ मुहावरेदार-सीएसएस से संबंधित संपत्तियों (जैसे स्थिति और बॉक्स-मॉडल) को पसंद कर सकती हैं।
• दोनों तरीकों के लिए पेशेवरों और विपक्ष हैं। एक तरफ, वर्णमाला क्रम सार्वभौमिक है (कम से कम लैटिन वर्णमाला का उपयोग करने वाली भाषाओं के लिए), इसलिए एक संपत्ति को दूसरे से छाँटने के बारे में कोई तर्क नहीं है। हालाँकि, यह मुझे बहुत अजीब लगता है कि नीचे और ऊपर जैसे गुण एक दूसरे के ठीक बगल में नहीं हैं। प्रदर्शन प्रकार से पहले एनिमेशन क्यों दिखाई देने चाहिए? वर्णमाला क्रम के साथ बहुत सी विषमताएँ हैं। दूसरी ओर, प्रकार के गुणों का आदेश देना सही अर्थ है। हर फॉन्ट से संबंधित घोषणाओं को इकट्ठा किया जाता है, ऊपर और नीचे फिर से पुनर्मिलन किया जाता है और एक लघु कथा पढ़ने की तरह एक नियमबद्ध तरीके से महसूस किया जाता है। SASS गाइड ।
• समूह सॉर्ट की गई फ़ाइलें gzip के बाद 2% से छोटी हैं। जादू। यह लेख सीएसएस प्रॉपर ऑर्डर करने के लिए 5 अलग-अलग तरीकों का परिचय देता है। अध्ययन

उपयोग न करने के कुछ कारण

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

वर्णमाला का उपयोग करने के कारण:

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

तो, TLDR

• हम में से अधिकांश (और मुझे आमतौर पर शामिल) सीएसएस सहारा के आदेश के बारे में एक बकवास नहीं दे रहे हैं। हम में से अधिकांश भी सीएसएस के बारे में एक बकवास नहीं दे रहे हैं।
• CSS-in-JS भी सर्वोत्तम प्रथाओं को प्रोत्साहित नहीं करता है।
• परमाणु सीएसएस जैसी सर्वोत्तम प्रथाएं समूहों (डिजाइन द्वारा) के साथ सर्वश्रेष्ठ हैं, जबकि बीईएम, दुर्भाग्य से, संपत्ति के आदेश के बारे में कुछ भी नहीं है:

यह वास्तव में थोड़ा अप्रत्याशित है, कि इस तरह की राय वाली बात अच्छी तरह से स्थापित और परिभाषित नहीं है, और मुझे यह लेख लिखना होगा।

मजेदार तथ्य - समूह और वर्णानुक्रम क्रम सर्वोत्तम हो सकते हैं, उदाहरण के लिए अपने मॉड्यूल आयात को एक प्रकार का वृक्ष की तरह, लिस्ट-प्लग-आयात
पहले समूह होते हैं, और वर्णमाला क्रम केवल एक समूह के अंदर उपयोग किया जाता है।

• समूहों के लिए स्टाइल लिंट: https://github.com/constverum/stylelint-config-rational-order (या csscomb)
• अल्फा सॉर्ट के लिए स्टाइल लिंट: https://github.com/hudochenkov/stylelint-order

अब तक मैंने काफी उचित तर्क प्रो grouping सुना, लेकिन एक भी (मेरे लिए उचित) प्रो अल्फा सॉर्ट नहीं।

यह भी देखें:

• (सभी प्रकारों के बारे में) https://mediatemple.net/blog/tips/different-logical-ways-group-css-properties/
• (समूहों के बारे में) https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685
• (एब्स के बारे में) https://medium.com/@jerrylowm/alppretize-your-css-properties-for-crying-out-loud-780eb1852153

अपना वीडियो देखें, और अपनी स्थिति स्पष्ट करें। मुझे साझा करने के लिए कुछ पॉपकॉर्न मिले हैं।