आप अपनी परियोजना में सीएसएस कैसे व्यवस्थित करते हैं?

Question

(जटिल) वेब एप्लिकेशन पर काम करते समय मुझे सबसे चुनौतीपूर्ण चीज़ों में से एक सीएसएस का आयोजन करना है। यहां कई अलग-अलग दृष्टिकोण हैं जिन पर हमने कई परियोजनाओं पर प्रयास किया है।

1: प्रत्येक वेब पेज/मॉड्यूल के लिए एक अलग स्टाइलशीट है।

स्पष्ट रूप से हम वेब ऐप्स के लिए बहुत नए थे, और इस दृष्टिकोण के परिणामस्वरूप कई स्टाइल शीट और शैलियों की बहुत अधिक पुनरावृत्ति हुई। आवेदन में स्थिरता प्राप्त करने के लिए हमारे पास कठिन समय था।

2: एक समान स्टाइल शीट है जो समान वेब पृष्ठों में साझा की जाती है।

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

हालांकि # 2 काम करता है, लेकिन फिर भी हमने देखा है कि हमारे उत्पादों में अभी भी समान यूआई गुणवत्ता और स्थिरता नहीं है जैसा हम चाहते हैं।

क्या कोई सीएसएस शैली दिशानिर्देश हैं कि किसी को बहुत ही जटिल वेब 2.0 एप्लिकेशन का संदर्भ लेना चाहिए। अन्य लोग अपनी स्टाइलशीट कैसे बनाए रखते हैं?

Answer 1

आप सीएसएस की कैस्केडिंग प्रकृति का लाभ उठाना चाहते हैं और नियमों को विरासत में मिला है।

कोड सबसे पहले सामान्य मामले और फिर विनिर्देशों को बदलें।

एक सामान्य आकार परियोजना के लिए यह बिल्कुल हाथ से बाहर नहीं होना चाहिए।

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

/* 
This is the CSS index page. It contains no CSS code but calls the other sheets 
*/ 
@import url("main/reset.css"); 
@import url("main/colors.css"); 
@import url("main/structure.css"); 
@import url("main/html-tags.css"); 
@import url("main/sign-up-sign-in.css"); 
@import url("main/pagination.css"); 
@import url("main/menu-items.css"); 
@import url("main/teachers-list.css"); 
@import url("main/footer.css"); 
@import url("main/misc-custom-sections.css"); 
@import url("main/error-messages.css"); 

शुभकामनाएं अपनी शैली ढूंढ रही हैं।

Answer 2

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

आदर्श रूप से मैं टेम्पलेट.css फ़ाइल को अधिकांश मामलों को कवर करने के लिए लचीला होने के लिए डिज़ाइन करना चाहता हूं।

Answer 3

मुझे खुद को इसी तरह की स्थितियों में मिला है।

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

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

समझौता प्राप्त करने के लिए इस हैक पर विचार करें। अपने सीएसएस की सेवा के लिए अपनी पसंद की भाषा (मेरे लिए PHP) का प्रयोग करें। कि मैं इस तरह अपनी शैली फ़ाइल को शामिल मतलब है:

<link rel="stylesheet" type="text/css" href="styles.php" /> 

, उस फ़ाइल के शीर्ष पाठ/सीएसएस सामग्री प्रकार के साथ इसे वापस, और कहा कि फाइल है

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

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

और इस तरह की चीजों पर आपको सलाह देने के लिए एक डिज़ाइनर प्राप्त करें। प्रायः हमारे लिए डेवलपर्स कुशल सीएसएस के कुछ बेहतर बिंदुओं के साथ-साथ उस विशिष्ट क्षेत्र में प्रशिक्षित लोगों के चारों ओर अपने सिर लपेटना मुश्किल है।

Answer 4

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

एक चीज जो मेरी मदद करती है वह है कि मैंने वास्तव में अपने सीएसएस के लिए छद्म नामस्थान बनाए। मुझे पता है कि सीएसएस 3 नामस्थान के लिए समर्थन है, और है कि यह आसान बनाता है, लेकिन जब से कुछ ब्राउज़रों इसका समर्थन नहीं करते, इस मुझे क्या करना है:

1. फोल्डर और प्रासंगिक फ़ाइलें आपके प्रोजेक्ट में बनाएँ (मैं जावा का उपयोग नाम स्थान शैली)
   • उदाहरण के लिए /css/com/mydomain/myprojectname/globalheader.css
2. इसके बाद, मैं कक्षा ऐसे नाम हैं जो फाइल सिस्टम स्थान
   • एफ के लिए नक्शे का उपयोग या उदाहरण < div id = 'शीर्षक के class =' ​​कॉम-mydomain-myprojectname-globalheader-topClass '>
3. उपयोग विभाजक और अपने सीएसएस फ़ाइल में अच्छा टिप्पणियां
   • उदाहरण के लिए/* --- ------------------------- लिंक अनुभाग शुरू करें -------------------- */
4. PHP का उपयोग करें या इन फ़ाइलों को लोड करने के लिए जो कुछ भी लोड करें और लोड पर एक स्टाइलशीट में गठबंधन करें (यदि आप वास्तव में चालाक हैं तो परिणामस्वरूप चादरें कैश कर सकते हैं। नामस्थान सम्मेलन कक्षा के नामों के बीच टकराव को रोक देगा।

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

Answer 5

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

सुनिश्चित करें कि तत्व शैलियों का उत्तराधिकारी हैं और ओवरराइड बहुत भारी नहीं हैं, आपके सीएसएस को पागल होने से रोकेंगे। ऐसा करके, फिर आप लेआउट/बेस शैलियों और ओवरराइड के लिए केवल 2 या 3 स्टाइल शीट रखने की अनुमति देते हैं। यदि आप लेआउट/बेस स्टाइल शीट में जो भी हो, उस पर भारी नियंत्रण स्तर डालते हैं, और ओवरराइड शीट में क्या होता है, यह देखने के लिए नियमित यात्राएं करते हैं कि बेस पर क्या स्थानांतरित किया जा सकता है और क्या सरल बनाया जा सकता है, आप स्वयं को मुक्त कर देंगे लोगों को इच्छा पर ओवरराइड करने की अनुमति देने के लिए, लेकिन रेंगने पर नियंत्रण रखने के लिए भी।

मेरे सिद्धांत है ...

Answer 6

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

दूसरा दृष्टिकोण उस समय तक अच्छा है जब आप प्रश्न बनाना शुरू करते हैं .. मेरा मतलब है:

क्या इस div के लिए पृष्ठभूमि शैली ग्राफिक.css में या layout.css में जाना चाहिए?

क्या पी की चौड़ाई आने पर फ़ॉन्ट शैली fonts.css में या लेआउट में होनी चाहिए?

आइकन स्थिति div के साथ शीर्षक के लिए मार्जिन ग्राफिक.css या लेआउट.css या fonts.css पर जाना चाहिए (आइकन, टेक्स्ट और टेक्स्ट के लिए एक ही घोषणा का उपयोग करना आसान होगा। स्थिति...)?

तब आपको एहसास हुआ कि इस दृष्टिकोण के बारे में कुछ गड़बड़ है।

अब मैं जो टिप्पणी कर रहा हूं वह टिप्पणी कर रहा है। बहुत। लेआउट, ग्राफिक्स और ग्रंथों: -

template.css

/* ////// Headers ////// */ 
#header { 
    width: 1004px; 
    height: 243px; /* 263H-20MARG=243H */ 
    padding: 20px 0px 0px 0px; 
    background-color: #000000; 
    background-image:url('../images/redset/top1-bk.png'); 
    background-repeat:no-repeat; 
    background-position:right top; 
    clear: both; 
} 

/* logo */ 
#logo { 
    background-image:url('../images/redset/wh-logo.png'); 
    background-repeat:no-repeat; 
    width:327px; 
    height: 263px; 
    float: left; 
    margin: -20px 0px 0px 0px; 
} 
#logo a { 
    width:327px; 
    height:263px; 
} 

/* Top menu & Banner */ 
#menuybanner { 
    text-align: center; 
/* margin-right: 65px; optional*/ 
} 
#bannerz { 
    height: 152px; 
    width: 653px; 
    text-align: left; 
    margin-right: 24px; 
    /* optional: width: 100%; 
    margin: 0px */ 
} 
#bigmenu { 
    text-align: left; 
    margin: 18px 0px 14px 74px; 
} 

#bigmenu img { 
    margin: 0px 22px 0px 0px; 
} 

मूल रूप से इस तीन अलग अलग सीएसएस में हो गया होता। अब मुझे पता है कि हर कोई क्या करता है।

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

a, .b, .c, .d, #f, #2 { background-color: black; } 

वास्तव में अनावरण करना मुश्किल है। बेशक अगर आपको ऐसा करने की ज़रूरत है, तो आगे बढ़ें, लेकिन मेरा मतलब है, कभी-कभी उन्हें सिर्फ कुछ और गूढ़ होने के लिए समूहीकृत नहीं किया जाता है ... मूडल की तरह ... हाहाहा।

आशा की आशा है।

देखें या।