विरासत वेब ऐप में सीएसएस स्पेगेटी को कैसे हटाएं?

Question

कई बड़े वेब अनुप्रयोगों पर काम करने के बाद, और बिना किसी स्पष्ट संरचना वाले विशाल स्टाइल शीट देखकर, मुझे वास्तव में यह जानना अच्छा लगेगा कि लोगों को अपने सीएसएस को बड़े और जटिल वेब ऐप्स के लिए साफ रखने के तरीके मिल गए हैं या नहीं।

आप विरासत, सीएसएस की गड़बड़ी को साफ करने, अच्छी तरह से कैस्केडिंग, डीआरवाई स्टाइलशीट से कैसे जाते हैं?

जिस ऐप पर मैं वर्तमान में काम कर रहा हूं उसके पास सीएसएस की 12000 लाइनें हैं। यह इस आकार में व्यवस्थित रूप से उगाया गया है क्योंकि सीएसएस की कोई मानक या समीक्षा नहीं थी, ऐप को डिजाइन से मेल खाने का एकमात्र नियम था। समस्याओं में से कुछ हम लगातार है:

• विरोधी शैलियों: एक डेवलपर एक .header कहते हैं {font-weight: bold;} लेकिन .header पहले से ही अन्य मॉड्यूल में इस्तेमाल किया गया था और उन में बोल्ड नहीं होना चाहिए।

• कैस्केडिंग समस्याएं: फू विजेट में एक हैडर है लेकिन इसमें हेडर वर्गों के साथ बार विजेट्स की एक सूची भी शामिल है।

  • यदि हम .foo .header {...} और .bar .header {...} को परिभाषित करते हैं तो foo में स्पष्ट रूप से अधिलेखित कुछ भी बार में दिखाई नहीं देगा।
  • अगर हम .foo> .header और .bar> .header को परिभाषित करते हैं लेकिन बाद में div में शीर्षलेख लपेटने के लिए foo को संशोधित करने की आवश्यकता होती है, तो हमारी शैली टूट जाती है।

• विरासत की समस्याएं, हम विजेट फोंट को लगातार 11px/सामान्य में फिर से परिभाषित करते हैं क्योंकि कुछ शीर्ष कंटेनर 12px/18 px लाइन ऊंचाई का उपयोग करते हैं।

• डेजो/डीजिट या jquery ui जैसे पुस्तकालयों का उपयोग करते हुए विजेट लाइब्रेरीज़ के खिलाफ लड़ना, जो कई शैलियों को कार्यात्मक रूप से जोड़ते हैं, इसका मतलब है कि हमारा कोड उन स्थानों के साथ बिखरा हुआ है जहां हमें लाइब्रेरी शैलियों को ओवरराइड करना है ताकि चीजों को ठीक से देख सकें ।

  नामस्थान सभी नए विजेट: वहाँ ~ बस 2000 में निर्मित dijit शैलियों

---

हम एक बिंदु है जहां हम निम्नलिखित नियमों को लागू करने की सोच रहे हैं पर हैं में सुधार करने के लिए सीएसएस की लाइनें हैं कक्षा - यदि आपके पास विजेट है तो सभी उप-वर्गनाम .foo_ होंगे इसलिए हमें: .foo, .foo_header, .foo_content, .foo_footer मिल जाएगा। यह हमारे सीएसएस अनिवार्य रूप से FLAT बनाता है, लेकिन हम विरासत शैलियों या ऊपर वर्णित कैस्केडिंग समस्याओं में भाग दिए बिना हमारे कोड को आगे बढ़ने का कोई अन्य तरीका नहीं देखते हैं।

पुलिस जेनेरिक शैलियों - जेनेरिक कक्षाओं का एक छोटा सा मुट्ठी भर है जो केवल विशिष्ट परिस्थितियों में लागू किया जाता है। जैसे । संपादन योग्य - एक वाक्य के भाग पर लागू करें जो एक संपादक को आमंत्रित करना चाहिए - केवल पाठ नोड्स होना चाहिए।

लीवरेज सीएसएस कंपाइलर mixins अलग-अलग विगेट्स में समान शैलियों को बार-बार परिभाषित करने से बचने के लिए, मिश्रणों को परिभाषित करें और उपयोग करें। हालांकि हम चिंता करते हैं कि मिश्रण भी नियंत्रण से बाहर हो जाएंगे।

हम सीएसएस गड़बड़ी से और कैसे आगे बढ़ सकते हैं जो लगातार आगे बढ़ने योग्य कुछ के लिए प्रतिगमन प्रस्तुत करता है।

Answer 1

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

एक उदाहरण मुझे पसंद है: http://getbootstrap.com/components/ (जोड़ा 2015)

अन्य समर्थक आप इस विधि से प्राप्त पुनर्प्रयोग है: क्या आप जानते हैं कि तुम क्या हो गया और आप जानते हैं कि आप शैली गाइड संभव के रूप में छोटे होना चाहता हूँ - इसलिए: पुन: उपयोग करें।

जब आप पहले से उपयोग में शैलियों में परिवर्तन करते हैं: शैली मार्गदर्शिका की जांच करें। यदि यह नहीं बदलता है तो यह संभवतः अच्छा है (यदि आप बॉक्स मॉडल-मुद्दों, या चौड़ाई, ऊंचाई, पैडिंग, सामान्य रूप से मार्जिन सहित कुछ बदल चुके हैं तो आपको थोड़ा सा ब्राउज़ करना पड़ सकता है)।

तुम कैसे साफ, अच्छी तरह से व्यापक, सूखी स्टाइलशीट करने के लिए एक विरासत से स्थानांतरित करते हैं, सीएसएस की गंदगी?

एक इकाई परीक्षण के रूप में शैली मार्गदर्शिका का उपयोग करें। एक बार जब आप इसमें आवश्यक भागों को प्राप्त कर लें: कम करें, रिफैक्टर करें और गठबंधन करें (आपको शायद .campaign_1 span और आपके नियमित नियमों के बीच कुछ संयोजन मिलेंगे, विरासत आपका मित्र हो सकता है)। लेकिन .header पहले से ही अन्य मॉड्यूल में इस्तेमाल किया गया था और उन में बोल्ड नहीं होना चाहिए;

विरोधी शैलियों: एक डेवलपर एक .header {bold font-weight} कहते हैं।

एड्रियानो वरोली पियाज़ा की टिप्पणी और ऊपर उद्धरण के जवाब में: मुझे इसे सीएसएस से पूरी तरह से संबंधित समस्या के रूप में याद नहीं है लेकिन HTML मार्कअप के लिए अधिक है। कोई फर्क नहीं पड़ता कि आप क्या करते हैं, यह कुछ भारी उठाने वाला होगा। तय करें कि आप कौन सा नियम रखना चाहते हैं और कम-इस्तेमाल किए गए लोगों को साफ करने के लिए कार्रवाई करें; उदाहरण के लिए: विरासत के माध्यम से: #news a .header { ... } या HTML-class a .stand_out_header { ... } का नाम बदलना।

बारे में निम्नलिखित विचार

नामस्थान सभी नए विजेट वर्गों - अगर आप एक विजेट foo सब उप classnames .foo_ जाएगी ताकि हम मिल है: .foo, .foo_header, .foo_content, .foo_footer। यह हमारे सीएसएस अनिवार्य रूप से FLAT बनाता है, लेकिन हम अपने कोड को आगे बढ़ने के लिए विरासत शैलियों या कैस्केडिंग समस्याओं का उल्लेख किए बिना का उल्लेख करते हुए हमारे कोड को व्यवस्थित करने के लिए कोई अन्य तरीका नहीं देखते हैं।

बजाय एक युक्त तत्वों का उपयोग करें, जो बनाए रखने के लिए और अधिक आसान हो जाएगा:

<div id="widget_email"> 
    <h2>One type of h2</h2> 
</div> 
<div id="widget_twitter"> 
    <h2>Another h2</h2> 
</div> 

Answer 2

मुझे लगता है कि "नेमस्पेसिंग" और सीएसएस में सीमित संघर्ष के लिए विधि अलग में अलग है कि आप क्या चाहते शामिल आवेदन करने के लिए, इसलिए प्रत्येक पृष्ठ केवल वही कॉल करता है जो इसकी आवश्यकता है।परस्पर विरोधी नियमों फिर बस उन्हें एक और अधिक विशेष रूप से परिभाषित करते हुए अधिक विशिष्ट किया जा सकता है शामिल हैं:

• सभी पृष्ठों
  • खंड में पृष्ठों खंड बी
  में पृष्ठों के लिए एक
  • सीएसएस के लिए सीएसएस के लिए सामान्य सीएसएस

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

हां, यह अधिक फ़ाइलों को लोड करने का तात्पर्य है। सर्वर-साइड भाषाओं के साथ इसके आसपास के तरीके हैं, जैसे php के साथ सभी फाइलें पढ़ने और सामग्री का केवल एक ब्लॉक भेजना।