सीएसएस बड़े पैमाने पर वेब साइट के लिए सर्वोत्तम अभ्यास

Question

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

वर्तमान में, वेब पृष्ठों के लिए शैलियों लागू करने के लिए मेरी विधि शरीर के हर वेब पेज एक विशिष्ट आईडी दे रहा है, और उसके बाद जब मैं एक पेज डिजाइन करने कर रहा हूँ मेरी सीएसएस नियम ऐसा दिखाई देगा:

body#news section .top { rules } 

निश्चित रूप से एक बड़े पैमाने पर वेबसाइट के लिए सीएसएस लगाने के लिए एक और अधिक रखरखाव दृष्टिकोण है?

Answer 1

प्रत्येक पृष्ठ को एक अद्वितीय आईडी के साथ body टैग देने से बचें। क्यूं कर? क्योंकि यदि किसी पृष्ठ को विशिष्ट रूप से स्टाइल करने की आवश्यकता है, में इसकी अपनी स्टाइलशीट होनी चाहिए।

मैं अक्सर एक main.css स्टाइलशीट, मेरी वेबसाइट के विभिन्न भागों के लिए इसी तरह की शैली (एक व्यवस्थापक अनुभाग के लिए एक administration.css की तरह, व्यवस्थापक अनुभाग में पृष्ठों संभालने के लिए एक समान लग साझा और लगता है) होगा, और फिर कुछ अद्वितीय पृष्ठों देना अपनी खुद की स्टाइलशीट (जैसे signup.css)।

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

उदाहरण के लिए, अगर मेरे main.css था:

a { color: blue; } 

दूसरा नियम के ऊपर लिख देगा:

a { color: red; } 

... और किसी कारण से, मैं नीले लिंक करने के लिए अपने पंजीकरण पृष्ठ चाहता था सबसे पहले अगर signup.cssmain.css के बाद शामिल किया गया था।

<link rel="stylesheet" href="/stylesheets/main.css"> 
<link rel="stylesheet" href="/stylesheets/signup.css"> 

Answer 2

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

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

दिन के अंत में कोई सही और गलत जवाब नहीं है। असफल टैग के साथ अपने मार्कअप को अधिभारित न करने का प्रयास करते समय बस पुन: प्रयोज्य सीएसएस शैलियों को बनाए रखने का प्रयास करें।

Answer 3

हमेशा सीएसएस के लिए कक्षाओं का उपयोग करें। यह आपको अपने अधिक कोड का पुन: उपयोग करने की अनुमति देगा। आप प्रति पृष्ठ एकाधिक डुप्लिकेट कक्षाएं हो सकता है के बाद से इस तुम सच में कुछ छोटे कोड बनाने के लिए अनुमति देता है।

सीएसएस दाईं से बाईं ओर पार्स करता है। तो उदाहरण में ऊपर यह इस क्रम में अपने चयनकर्ता मिलेगा: कि कि एक वर्ग टैग में हैं classname .top साथ तत्वों अनुभाग टैग में हैं classname .top साथ classname .top तत्वों के साथ

तत्वों भी #news तत्व ... आदि में निहित।

इसे इस तरह से देखें, आपको वास्तव में जितना संभव हो सके अपने चयनकर्ताओं को रखने की कोशिश करनी चाहिए। .top के लिए आधार शैली बनाएं, फिर यदि आपको # न्यूज़ सेक्शन के लिए कुछ कस्टम लिखना है तो आप #news .top का उपयोग कर सकते हैं।

हमेशा सबसे कम संभव नियमों का उपयोग करने का प्रयास करें।

margin:0 5px; 

margin:0 5px 0 5px; 

से अधिक यह बुनियादी है, लेकिन आप कितने लोगों को ऐसा नहीं करते हैं पर चकित होगी।

भी जानने तुम क्या शॉर्ट कर सकते हैं: यदि आप अपने नियम alphabetize

ex: font:bold 12px Helvetica, Arial, sans-serif; 

एक बात है कि बहुत उपयोगी है। विशेष रूप से यदि आप CSS3 -webkit- और -moz- गुणों का उपयोग कर रहे हैं। मैं धक्का इस पर पीठ का एक बहुत मिलता है, लेकिन मैं 12+ डेवलपर्स के साथ काम करते हैं और मैं

.myClass { color:#f00; /* more stuff */ color:#fff; } 

देखा है वे वर्णमाला तो आप कोड दोहराव से बचने जाएगा रहे हैं।

Answer 4

ऊपर उत्तर संक्षेप में और कुछ अतिरिक्त टिप्पणियां दे:

1. आप एक सीएसएस में सब कुछ डाल दिया, और पृष्ठ-विशिष्ट सेटिंग्स के लिए अद्वितीय शरीर आईडी का उपयोग। यह दृष्टिकोण आपकी साइट को गति देता है क्योंकि आप HTTP अनुरोधों को सहेज रहे हैं (ब्राउज़र कैश केवल एक फ़ाइल)
2. आपके पास प्रति पृष्ठ एक सीएसएस है, साथ ही वैश्विक सेटिंग्स, हेडर, पाद लेख और अन्य तत्वों का ख्याल रखने के लिए एक वैश्विक व्यक्ति है हर जगह। यह मित्रवत है यदि आपके पास एक से अधिक डेवलपर काम कर रहे हैं - एक ही फ़ाइल के अपडेट के कारण संघर्षों का कम मौका। यहां तक ​​कि यदि आप एसवीएन (और एक बड़ी साइट के साथ) के रूप में एक संस्करण प्रणाली का उपयोग करते हैं, तो यह हमेशा अलग फाइलों के लिए सुरक्षित है।
3. आप फ़ाइलों में अलग करके दोनों दुनिया के सर्वश्रेष्ठ हो सकते हैं, और उसके बाद एक "संकलित" सीएसएस में विलय और संपीड़ित करने के लिए एक मिनीफायर का उपयोग कर सकते हैं। यह अधिक जटिल है, आपको इसे अपने वर्कफ़्लो में फिट करने की आवश्यकता है, और यह फ्रंटेंड डिबगिंग को कठिन बनाता है। Any recommendations for a CSS minifier? देखें।

Answer 5

यहाँ पर एक बहुत जानकारीपूर्ण और विस्तृत जवाब है: http://www.slideshare.net/stubbornella/object-oriented-css

या सीएसएस सिस्टम: Managing CSS Explosion

आप भी वस्तु उन्मुख सीएसएस की जाँच कर सकता है http://www.slideshare.net/nataliedowne/css-systems-presentation