मुझे अपनी CSS फ़ाइल (सामग्री) को कैसे व्यवस्थित करना चाहिए?

Question

यह प्रश्न वास्तविक। CSS निर्देशों को एक .css फ़ाइल के भीतर व्यवस्थित करने के बारे में है। एक नया पेज या पेज सेट करते समय, मैं आमतौर पर केवल .css फ़ाइल में हाथ से निर्देश जोड़ता हूं, जब मैं कर सकता हूं, तो रिफलेक्टर की कोशिश कर रहा हूं। कुछ समय बाद, मेरे पास सैकड़ों (या हजारों) लाइनें हैं और लेआउट को ट्विक करने पर मुझे जो कुछ भी चाहिए उसे ढूंढना मुश्किल हो सकता है।

क्या किसी के पास सलाह है कि निर्देश कैसे व्यवस्थित करें?

• क्या मुझे DOM की नकल करते हुए, टॉप-डाउन को व्यवस्थित करने की कोशिश करनी चाहिए?
• क्या मुझे कार्यात्मक रूप से व्यवस्थित करना चाहिए, यूआई के समान भागों का समर्थन करने वाले तत्वों के लिए निर्देशन एक साथ करना चाहिए?
• क्या मुझे चयनकर्ता द्वारा वर्णानुक्रम में सब कुछ छाँटना चाहिए?
• इन दृष्टिकोणों का कुछ संयोजन?

इसके अलावा, सीएसएस को एक फाइल में रखने की सीमा क्या है इससे पहले कि इसे अलग-अलग फाइलों में बंद करने का एक अच्छा विचार हो सकता है? कहो, 1000 लाइनें? या हमेशा पूरी बात को एक जगह पर रखना एक अच्छा विचार है?

संबंधित प्रश्न: सीएसएस नियमों को व्यवस्थित करने का सबसे अच्छा तरीका क्या है?

Comments

FYI करें - मैंने <a href=" stackoverflow.com/questions/72911/… वही प्रश्न-पत्र / ग्राफ़, पूछा कि आप और अधिक प्रतिक्रियाएँ पढ़ना चाहते हैं या नहीं।

— नातान लांग

महान सवाल, महान जवाब उत्पन्न। काफी उपयोगी सामान मिला। धन्यवाद।

— सेबेस्टियन

Answer 1

शुरू करने के लिए इन तीन स्लाइडशो प्रस्तुतियों पर एक नजर:

• सुंदर बनाए रखने योग्य सीएसएस
• बनाए रखने योग्य सीएसएस
• कुशल, बनाए रखने योग्य, मॉड्यूलर सीएसएस

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

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

दूसरों ने अब तक जो भी कहा है, उसके विपरीत, मैं प्रत्येक संपत्ति को एक अलग लाइन पर लिखना पसंद करता हूं, और समूह से संबंधित नियमों के लिए इंडेंटेशन का उपयोग करता हूं। उदाहरण के लिए ओली का उदाहरण:

#content {
    /* css */
}
    #content div {
        /* css */
    }
    #content span {
        /* css */
    }
    #content etc {
        /* css */
    }

#header {
    /* css */
}
    #header etc {
        /* css */
    }

यह फ़ाइल संरचना का पालन करना आसान बनाता है, विशेष रूप से समूहों के बीच पर्याप्त व्हाट्सएप और स्पष्ट रूप से चिह्नित टिप्पणियों के साथ, (हालांकि जल्दी से स्किम करना आसान नहीं है) और संपादित करना आसान है (क्योंकि आपको सीएसएस की लंबी लाइनों के माध्यम से वेड नहीं करना है प्रत्येक नियम के लिए)।

समझें और कैस्केड और विशिष्टता का उपयोग करें (ताकि आपके चयनकर्ताओं को वर्णानुक्रम में छांटना सही हो)।

क्या मैं अपने सीएसएस को कई फाइलों में विभाजित करता हूं, और कौन सी फाइलें साइट और सीएसएस के आकार और जटिलता पर निर्भर करती हैं। मैं हमेशा कम से कम ए reset.css। यह layout.cssसामान्य पृष्ठ लेआउट के साथ होता है, nav.cssअगर साइट नेविगेशन मेनू थोड़ा जटिल हो जाता है और forms.cssअगर मुझे अपने स्वरूपों को स्टाइल करने के लिए बहुत सीएसएस मिला है। इसके अलावा, मैं अभी भी इसे खुद ही समझ रहा हूँ। मैं हो सकता है colors.cssऔर type.css/fonts.cssबंद रंग / ग्राफिक्स और टाइपोग्राफी विभाजित करने के लिए, base.cssसभी HTML टैग के लिए एक पूर्ण आधार शैली प्रदान करने के लिए ...

Comments

नोट: reset.cssएक मृत लिंक बन गया है

— ब्रैडेन बेस्ट

@BradenBest, धन्यवाद, YUI लिंक अपडेट किए गए। यकीन नहीं है कि अगर रीसेट। एससीएस लिंक में अभी भी वही जानकारी है जो मूल रूप से थी, हालांकि। और YUI अब नहीं है , इसलिए आप शायद कुछ Googling से बेहतर हैं।

— व्यापारी

Answer 2

मैं अपनी सीएसएस को इस तरह से व्यवस्थित करता हूं:

1. रीसेट
2. base.css: मैंने पृष्ठ के मुख्य वर्गों के लिए लेआउट सेट किया है
   1. सामान्य शैलियों
   2. हैडर
   3. एनएवी
   4. सामग्री
   5. फ़ुटबाल
3. अतिरिक्त- [पेज का नाम] .css: केवल एक पृष्ठ में उपयोग की जाने वाली कक्षाएं

Comments

यदि आप CSS जोड़ने जा रहे हैं जो केवल एक पृष्ठ में उपयोग किया जाता है, तो बिना CSS फ़ाइल का उपयोग किए सिर्फ उस पृष्ठ पर css क्यों नहीं डाला जाता है?

— सारिणी

हे भगवान, मैंने ऐसा क्यों नहीं सोचा?

— सेबस्टियन

@ user371699 कुछ का तर्क होगा कि टैग के <link>साथ HTML फ़ाइल को अव्यवस्थित करने की तुलना में अधिक कुशल है <style>।

— DylRicho

अगर आप सीएसएस फ़ाइलों में अपने सीएसएस को बनाए रखते हैं, तो आप आसानी से विभिन्न शैलियों के बीच स्विच कर सकते हैं। <स्टाइल> टैग के साथ, आपको सब कुछ फिर से लिखना होगा।

— रीनाल्डोलुकमैन

@AlexLeung अधिक बनाए रखने योग्य। मेरी ओर से शब्दों का बुरा विकल्प!

— DylRicho

Answer 3

हालाँकि आपको पढ़ना आसान लगता है!

गंभीरता से, आपको एक अरब और पाँच सुझाव मिलेंगे, लेकिन आप केवल कुछ तरीकों को पसंद करने जा रहे हैं।

हालाँकि मैं कुछ बातें कहूँगा:

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

व्यक्तिगत रूप से मैं इस तरह से अपने सीएसएस कोड:

* { /* css */ }
body { /* css */ }
#wrapper { /* css */ }
#innerwrapper { /* css */ }

#content { /* css */ }
#content div { /* css */ }
#content span { /* css */ }
#content etc { /* css */ }

#header { /* css */ }
#header etc { /* css */ }

#footer { /* css */ }
#footer etc { /* css */ }

.class1 { /* css */ }
.class2 { /* css */ }
.class3 { /* css */ }
.classn { /* css */ }

नियमों को एक पंक्ति में रखने से मुझे फ़ाइल को बहुत तेज़ी से स्किम करने की अनुमति मिलती है और देखें कि वहाँ क्या नियम हैं। जब उनका विस्तार किया जाता है, तो मुझे यह बहुत अधिक लगता है कि कड़ी मेहनत करने से यह पता चलता है कि क्या नियम लागू किए जा रहे हैं।

Comments

देव उद्देश्य के लिए एक बड़ा सीएसएस (या कोई अन्य) फ़ाइल बनाना पूरी तरह से बुरा अभ्यास है। क्या आपने कभी सीएसएस या जावास्क्रिप्ट फ़ाइलों के साथ काम किया है 5000 + लाइनें लंबी? शायद ऩही। हालाँकि, उपकरण जो सभी सीएसएस को बड़ा करते हैं और उन उत्पादों के लिए बड़ी मात्रा में विलय कर देते हैं, जो देव चरण में इस तरह के मुद्दों के बिना, इस काम को करने के लिए मौजूद हैं।

— फोर्बर्ग

ध्यान दें यह उत्तर 9 साल पुराना है। टूलींग है कि मौजूदा वापस तो वास्तव में लगभग उतना उन्नत नहीं था जितना कि आप आज का उपयोग करेंगे (जैसे LESS / SASS पूर्वप्रक्रमक)। लेकिन फिर भी, एक-बड़े-स्टाइलशीट तब असामान्य नहीं थे ... इसलिए उत्तर में शैली। यदि वे इनलाइन नहीं होते, तो वे 10,000 रेखाएँ लंबी होतीं । आजकल मैं चीजों को अलग तरह से करता हूं, लेकिन मेरे पास अलग-अलग उपकरण हैं, और हमारे पास डाउनलोड के बीच विलंबता को कम करने के लिए HTTP2 जैसी चीजें हैं।

— ओली

Answer 4

आपके CSS को फॉर्मेट करने के लिए कई मान्यताप्राप्त तरीके हैं। अंततः यह आपके ऊपर है कि आप सबसे अधिक आरामदायक लेखन क्या महसूस करते हैं लेकिन ये आपके सीएसएस को अधिक जटिल परियोजनाओं के प्रबंधन में मदद करेगा। ऐसा नहीं है कि यह मायने रखता है, लेकिन मैं बीईएम और एसएमएसीएसएस के संयोजन का उपयोग करता हूं।

BEM (ब्लॉक, तत्व, संशोधक)

बीईएम आपके फ्रंट-एंड कोड को पढ़ने और समझने में आसान, साथ काम करने में आसान, पैमाने से आसान, अधिक मजबूत और स्पष्ट और बहुत अधिक सख्त बनाने के लिए एक अत्यधिक उपयोगी, शक्तिशाली और सरल नामकरण सम्मेलन है।

खंड मैथा

स्टैंडअलोन इकाई जो अपने आप में सार्थक है जैसे:

header, container, menu, checkbox, input

तत्त्व

एक ब्लॉक के कुछ हिस्सों और कोई स्टैंडअलोन अर्थ नहीं है। वे इसके ब्लॉक से शब्दबद्ध हैं:

menu item, list item, checkbox caption, header title

संशोधक

ब्लॉक या तत्वों पर झंडे। उपस्थिति या व्यवहार बदलने के लिए उनका उपयोग करें:

disabled, highlighted, checked, fixed, size big, color yellow

---

OOCSS

OOCSS का उद्देश्य कोड के पुन: उपयोग को प्रोत्साहित करना है और अंततः, तेज और अधिक कुशल स्टाइलशीट को जोड़ना और बनाए रखना आसान है।

OOCSS दो मुख्य सिद्धांतों पर आधारित है:

1. त्वचा से संरचना का पृथक्करण

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

2. कंटेनरों और सामग्री का पृथक्करण

अनिवार्य रूप से, इसका मतलब है "शायद ही कभी स्थान-निर्भर शैलियों का उपयोग करें"। एक वस्तु को वही नहीं देखना चाहिए जहाँ आप उसे रखते हैं। इसलिए .myObject h2 {...} के साथ एक विशिष्ट स्टाइल करने के बजाय, एक वर्ग बनाएं और लागू करें जो प्रश्न में वर्णित है, जैसे। यह आपको आश्वासन देता है कि: (1) सभी अवर्गीकृत समान दिखेंगे; (2) श्रेणी वर्ग (जिसे मिक्सिन कहा जाता है) वाले सभी तत्व समान दिखेंगे; और 3) आपको उस मामले के लिए एक ओवरराइड स्टाइल बनाने की आवश्यकता नहीं होगी जब आप वास्तव में चाहते हैं। सामान्य रूप से दिखने के लिए .OOject h2।

---

SMACSS

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

SMACSS के मूल में वर्गीकरण है। CSS नियमों को वर्गीकृत करके, हम पैटर्न देखना शुरू करते हैं और इनमें से प्रत्येक पैटर्न के आसपास बेहतर प्रथाओं को परिभाषित कर सकते हैं।

पांच प्रकार की श्रेणियां हैं:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

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

लेआउट में सभी नेविगेशन, ब्रेडक्रंब, साइटमैप आदि होंगे।

मॉड्यूल क्षेत्र विशेष शैलियों जैसे संपर्क फ़ॉर्म शैली, मुखपृष्ठ टाइल, उत्पाद सूची आदि आदि।

राज्य में राज्य वर्ग शामिल हैं जैसे कि इस्लेक्टेड, इसेटिव, हैशर, वासेबल असफल आदि।

थीम में कोई भी शैली शामिल है जो थीमिंग से संबंधित है।

---

यहाँ बहुत अधिक विवरण हैं, लेकिन इन लोगों पर भी एक नज़र डालें:

• सूटकेस
• AtomicCSS (परमाणु डिजाइन नहीं)
• oCSS (कार्बनिक सीएसएस)

Answer 5

मैं इस आदेश के साथ जाता हूं:

1. सामान्य शैली के नियम, आमतौर पर नंगे तत्वों (ए, उल, ओएल आदि) पर लागू होते हैं, लेकिन वे सामान्य वर्ग के रूप में भी हो सकते हैं।
2. पृष्ठ लेआउट नियम अधिकांश / सभी पृष्ठों पर लागू होते हैं
3. व्यक्तिगत पेज लेआउट नियम

किसी भी शैली के नियमों के लिए, जो किसी एक पृष्ठ, या एक छोटे समूह के पृष्ठों पर लागू होते हैं, मैं शरीर को एक आईडी और एक कक्षा में सेट करूँगा, जिससे विशेष पृष्ठों को लक्षित करना आसान होगा। आईडी फ़ाइल का आधार नाम है, और कक्षा निर्देशिका नाम है जहां यह है।

Comments

मैं इस बात से सहमत हूं कि मैं इसका वर्णन कैसे करूंगा ... 1) वैश्विक नियम (जैसा कि आपने वर्णित है, लेकिन साइट पर मौजूद लगभग हर चीज को प्रभावित करते हैं), 2) मास्टर पेज रूल्स (यह इसके लिए होगा) शीर्ष लेख, पाद लेख, सामग्री क्षेत्र, और साइडबार, यदि कोई हो, जो कि एक या अधिकांश पृष्ठ हैं, और 3) अलग-अलग पृष्ठ नियमों के अनुसार, संबंधित पृष्ठों के लिए फाइलों में अलग हो जाते हैं। कुछ टिप्पणियां की गई हैं कि इस तरह से स्टाइलशीट्स को विभाजित करने से बहुत अधिक अनुरोध होते हैं, लेकिन यह वास्तव में केवल दो अनुरोध हैं और यह सुनिश्चित करता है कि अनावश्यक शैलियों को हर पृष्ठ पर लोड नहीं किया जाए।

— MQuiggGeorgia

यह मूल उत्तर 10 साल पुराना है और इसे किसी भी तरह से कला की स्थिति नहीं माना जाना चाहिए।

— जोनाथन अर्केल

संपादित न करें, केवल एक अस्वीकरण जोड़कर विचार करें कि यह कितना पुराना है। बस इतना ही।

— जोनाथन अर्केल

Answer 6

मैंने विभिन्न रणनीतियों का एक गुच्छा लेने की कोशिश की है, और मैं हमेशा इस शैली में वापस आता हूं:

.class {border: 1px solid #000; padding: 0; margin: 0;}

यह सबसे बड़ी बात है जब यह घोषणाओं की एक बड़ी मात्रा में आता है।

श्री स्नूक ने लगभग चार साल पहले इस बारे में लिखा :) ।

Comments

दूसरे दिन ... दो साल पहले =)

— ओली

हा! वास्तव में उन्होंने किया - दिलचस्प :) उन्होंने हाल के एक लेख से इसे जोड़ा होगा। या, शायद मैं सिर्फ पागल हूँ।

— निक सार्जेंट

Answer 7

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

इसके अलावा, समूह संबंधी नियम एक साथ। और अपने नियमों को कई फाइलों में विभाजित करें ... जब तक कि हर पृष्ठ को वास्तव में हर नियम की आवश्यकता न हो ।

Answer 8

जैसा कि वास्तविक ऑर्डरिंग आपके सीएसएस को लागू करने का एक महत्वपूर्ण हिस्सा है, "वर्णमाला" सुझाव के साथ आगे बढ़ना थोड़ा मूर्खतापूर्ण लगता है।

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

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

Answer 9

मैं लगातार इस बारे में चिंता करता था, लेकिन फायरबग बचाव के लिए आया था।

इन दिनों, यह देखना आसान है कि आपकी शैली फायरबग के माध्यम से कैसे परस्पर संबंध रखती है और वहां से यह पता लगाती है कि क्या करने की आवश्यकता है।

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

Answer 10

ये है जो मैं करता हूं। मेरे पास एक सीएसएस इंडेक्स पेज है, जिस पर कोई निर्देश नहीं है और जो विभिन्न फाइलों को कॉल करता है। यहाँ एक छोटा सा नमूना है:

@import url("stylesheet-name/complete-reset.css");
@import url("stylesheet-name/colors.css");
@import url("stylesheet-name/structure.css");
@import url("stylesheet-name/html-tags.css");
@import url("stylesheet-name/menu-items.css");
@import url("stylesheet-name/portfolio.css");
@import url("stylesheet-name/error-messages.css");

यह एक पूर्ण रीसेट के साथ शुरू होता है। अगली फ़ाइल आसान संदर्भ के लिए रंग पैलेट को परिभाषित करती है। तब मैं शैली मुख्य <div/>रों कि लेआउट, शीर्ष, पादुका का निर्धारण, कॉलम, जहां वे फिट, आदि की संख्या ... html टैग definses <body/>, <h1/>,<p/> , टी आदि ... अगला साइट के विशिष्ट अनुभागों आते हैं।

यह बहुत स्केलबेल है और बहुत स्पष्ट है। कोड बदलने के लिए और dd नए अनुभागों के लिए बहुत अधिक अनुकूल है।

Comments

और इसका मतलब है कि ब्राउज़रों को सर्वर से 9 अनुरोध करने होंगे, इससे पहले कि वे एक पेज रेंडर करना शुरू कर सकें! यह ध्यान रखें कि अधिकांश ब्राउज़र एक समय में एक सर्वर से दो से अधिक कनेक्शन की अनुमति नहीं देंगे! यह देव के लिए ठीक है, लेकिन आप इसे उत्पादन के लिए एक फ़ाइल में संपीड़ित करना चाहते हैं! उसी जेएस के लिए चला जाता है

— ओली

लिंक @import की तुलना में बहुत अधिक कुशल है। Yahoo YSlow नियम # 13

— 1

Answer 11

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

उदाहरण के लिए: reset.css, design.css, text.cssऔर इसके आगे। जब मैं अंतिम उत्पाद जारी करता हूं, तो मैं सभी शैलियों को एक फ़ाइल में मैश करता हूं।

एक अन्य उपयोगी टिप नियमों पर पठनीयता पर ध्यान केंद्रित करना है, न कि शैलियों पर।

जबकि:

ul li
{
    margin-left: 10px;
    padding: 0;
}

अच्छा लग रहा है, यह आसान नहीं है जब आप नियम प्राप्त करते हैं, कहते हैं, कोड की 100 लाइनें।

इसके बजाय मैं इस प्रारूप का उपयोग करता हूं:

rule { property: value; property: value; }

rule { property: value; property: value; }

Answer 12

ITCSS

हैरी रॉबर्ट्स (सीएसएस विजार्ड्री) द्वारा

वैश्विक नाम स्थान और कैस्केड को परिभाषित करता है, और चयनकर्ताओं को विशिष्टता कम रखने में मदद करता है।

संरचना

यदि आप प्रीप्रोसेसर का उपयोग कर रहे हैं तो पहले दो ही लागू होते हैं।

1. (समायोजन)
2. (उपकरण)
3. जेनेरिक्स
4. तत्वों
5. वस्तुओं
6. अवयव
7. तुरुप

Answer 13

आम तौर पर मैं ऐसा करता हूं:

1. <link rel="stylesheet" href="css/style.css">

2. Style.css में मैं निम्नलिखित का पालन करता हूं:

   @import url(colors.css);
   @import url(grid.css);
   @import url(custom.css); + some more files (if needed)
   

3. में colors.cssमैं @import(जब सीएसएस कस्टम गुण का उपयोग करके) निम्नलिखित:

   @import url(root/variable.css);
   

सब कुछ क्रम में है और संपादित करने के लिए कोड के किसी भी हिस्से को प्राप्त करना आसान है। मुझे खुशी होगी अगर यह किसी तरह मदद करे।