हम मैं कुछ ऐसा जोड़ा जिसे हमने "सीएसएस संकलन" नाम दिया, जो कि विधिवत के उत्तर देने जैसा कुछ है। हमारा संकलन (PHP बैकएंड द्वारा किया गया) प्रत्येक मॉड्यूल के लिए एक संकलित सीएसएस फ़ाइल उत्पन्न करता है और इस प्रकार एक एकल सीएसएस फ़ाइल रनटाइम पर लोड होती है। यह हमें कई सीएसएस फाइलों को परिभाषित करने की स्वतंत्रता देता है जैसा कि हम प्रदर्शन के बारे में चिंता किए बिना चाहते हैं। इसके लिए हमने एक सरणी $moduleCssrelation परिभाषित किया जिसमें मॉड्यूल-सीएसएस फाइलें हमारे प्रोजेक्ट की कॉन्फ़िगरेशन फ़ाइल (मॉड्यूल उदा। लॉगिन, होम इत्यादि और प्रत्येक मॉड्यूल के लिए सीएसएस फाइलों को लोड करने के लिए) में शामिल हैं। अंत में उस पर अधिक जानकारी का वर्णन करना क्योंकि यह शैली-वास्तुकला का मूल है।
यह बुनियादी सीएसएस योजना है कि हम प्रयोग किया जाता है: -
- विस्तार से अध्ययन सभी मॉड्यूल शैली पैटर्न/पुन: प्रयोज्य घटकों का उल्लेख किया और देखा कि
- हैडर अनुभाग, पाद लेख अनुभाग और एक बाएं मेनू प्रत्येक मॉड्यूल
- में कई मॉड्यूल हैं जिनमें केंद्र में कुछ सूचियों (सामान्य हेडर, पाद लेख और बाएं मेनू छोड़कर) के टैब्यूलर डिस्प्ले सेक्शन हैं और ऐसे कई मॉड्यूल हैं जो कुछ विवरण विवरण जैसे उपयोगकर्ता विवरण पृष्ठ प्रदर्शित करते हैं, कक्षा विवरण पृष्ठ।
हमारे पास डिजाइनरों की एक टीम द्वारा हमें दी गई एक ही फाइल में सभी शैलियों थीं। फिर हमने पिछले चरण में अध्ययन के अनुसार स्टाइल पैटर्न के अनुसार एकल सीएसएस फ़ाइल को कई टुकड़ों में विभाजित कर दिया।
common.css शीर्ष, पादुका युक्त, बाएँ मेनू शैलियों
listings.css केवल सूची पृष्ठों में दिखाई देने घटकों के लिए सभी शैली परिभाषाएँ युक्त - तो, हम कुछ फ़ाइलों की तरह बनाया।details.css जैसा कि आपने कहा है कि .detailsRedHeading कक्षा है, जो केवल विवरण पृष्ठों के मामले में आवश्यक है, इसे यहां परिभाषित करें।
किसी भी अतिरिक्त शैलियों - कई मॉड्यूल लगता है अपनी शैली के साथ एक पॉपअप की जरूरत है, तो बजाय common.css में उन शैलियों या किसी अन्य फ़ाइल को परिभाषित करने का एक popups.css अंदर उन शैलियों डाल दिया। हमें जितनी चाहें उतनी सीएसएस फाइलों को परिभाषित करने की स्वतंत्रता को याद रखें।
बाद में विषय की आसानी के लिए बदल जाता है
मैं "की मैं जबकि सभी सजावट (रंग, पृष्ठभूमि 1 फ़ाइल में सभी लेआउट (स्थिति, आकार, आदि) डाल की कोशिश की है अपने विचार कभी नहीं लागू कर दिए हैं , आदि) एक और में ", लेकिन अगर यह आपकी मदद करता है, तो आप इसे इस वास्तुकला में जोड़ सकते हैं। common.csscommon_layout.css, common_design.css और इसी तरह दूसरों के लिए तोड़ें।
इसके अलावा, सुनिश्चित करें कि आप पहली बार अधिकतम संभव शैली का पुन: उपयोग करते हैं। इस तरह शैली घोषणाओं से बचें: -
.listingsBody
{
font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 12px;
..
some listing page styles
..
}
.detailsBody
{
font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 12px;
..
some details page styles
..
}
इसके बजाय यह है: -
.siteMediumFont
{
font-family:Trebuchet MS,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 12px;
}
.detailsBody
{
..
some details page styles
..
}
.listingsBody
{
..
some listing page styles
..
}
मैंने देखा है कई डिजाइनरों ऐसा करने कि। अधिक जटिल मामलों में यह आदत बाद में चीजों को वास्तव में मुश्किल बना सकती है।
संकलन पर विवरण: -
के बाद हम सीएसएस परिवर्तनों को लागू करने के बाद, हम संकलन कोड है जो निम्न करता चलाएँ: -
$moduleCssrelation = array("class_details"=> array("details","popups"));
सरणी $moduleCssrelation Traverse और से एक संकलित फ़ाइल बनाने प्रत्येक मॉड्यूल के लिए सीएसएस फ़ाइल नाम की सामग्री। उदा। यदि class_details मॉड्यूल को details.css, popups.css फ़ाइलों की आवश्यकता है, तो यह फ़ाइल common-details-popups.css बनाता है जो class_details के साथ-साथ इन दो सीएसएस फ़ाइलों की आवश्यकता वाले किसी अन्य मॉड्यूल के लिए भी लोड किया जाएगा।