रखरखाव सीएसएस लिखने के लिए सबसे अच्छा अभ्यास क्या हैं?

Question

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

सीएसएस नियमों की संरचना के लिए कुछ अलग दृष्टिकोण हैं।

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

.my-class { 
    border-top:1px solid #c9d7f1; 
    font-size:1px; 
    font-weight:normal; 
    height:0; 
    position:absolute; 
    top:24px; 
    width:100%; 
} 

एक और दृष्टिकोण मैं संपत्तियों के कार्यरत समूह देखा, कहते हैं कि font-size, टाइपफेस, जोर आदि एक नियम में चला जाता है की तरह पाठ से संबंधित गुण, पृष्ठभूमि अन्य में जाने, सीमाओं/मार्जिन अभी तक एक दूसरे में जाना:

.my-class { 
    border-top:1px solid #c9d7f1; 
} 

.my-class { 
    font-size:1px; 
    font-weight:normal; 
} 

.my-class { 
    height:0; 
    top:24px; 
    width:100%; 
    position:absolute; 
} 

मुझे लगता है कि मैं यहाँ एक चांदी की गोली रहा हूँ जो मुझे पता है मैं नहीं हूँ टी पाने के लिए जा रहा है, फिर भी शर्त - इस जगह में सबसे अच्छा प्रथा क्या हैं?

Answer 1

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

.my-class { 
    /* stuff here */ 
} 

    .my-class tr { 
     /* stuff here */ 
    } 

     .my-class tr a { 
      /* stuff here */ 
     } 

पता नहीं के बारे में सर्वोत्तम प्रथाओं हालांकि, एक तरफ बंद करने से एक के रूप में एक ही लाइन पर खोलने ब्रेस डाल, और एक सेमी-कोलन के साथ प्रत्येक संपत्ति न खत्म होने वाली है, भले ही यह पिछले एक है से।

Answer 2

मैंने अपने आदेश का उपयोग किया, जो मेरे लिए दृढ़ था।

नियम अवरोही क्रम में सूचीबद्ध थे, और मानदंड लेआउट पर नियम का प्रभाव है। उदाहरण के लिए:

.element { 
    float:none; 
    position:relative; 
    top:-2px; 
    z-index:100; 
    width:100px; 
    height:100px; 
    margin:10px 0; 
    padding:0; 
    border:1px solid #000; 
    background:#F00; 
    font-size:10px; 
    color:#CCC; 
} 

बेशक, ऊपर दिए गए उदाहरण में मैंने सभी सीएसएस निर्देशों की सूची नहीं दी है।

विशेष विचार जैसे समूहों, के आदेश रखने के लिए किया गया था:

1. पोजिशनिंग
2. चौड़ाई और ऊंचाई
3. मार्जिन और paddings
4. बॉर्डर्स (और दूसरों को, तत्व के कुल आयाम को प्रभावित करने वाले)
5. पृष्ठभूमि, संरेखित (और अन्य, जो पूरे पृष्ठ के लेआउट को प्रभावित नहीं करते हैं)
6. टाइपोग्राफी

Answer 3

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

Answer 4

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

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

/* HEADER */ 

#header { 
    float:left; 
    width:100%; 
    height:162px; 
    background:url(images/headerbg.gif); 
    background-repeat:no-repeat; 
} 

#header-left { 
    float:left; 
    margin:0; 
    padding:0; 
    width:350px; 
} 

#header-right { 
    float:right; 
    margin:0; 
    padding:0; 
    width:620px; 
} 

#header a { 
    color:#c4e6f2; 
    text-decoration:none; 
} 

#header a:hover { 
    color:#ffffff; 
} 

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

Answer 5

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

div.foo { 
    float: left; 
    padding: 1em; 
    margin: 1em; 

    background-color: #fff; 
    border: solid 1px silver; 

    font-family: ... 
} 

मेरे सोच भी है कि अधिकतम पठनीयता के लिए, आप प्रत्येक निर्देश के रूप में संभव के रूप में घने बनाना चाहते है। यही कारण है कि कहने के लिए है, यहाँ गद्दी आसान है मार्जिन की तुलना में पढ़ने के लिए:

div.foo { 
    padding: 1em; 
    margin-top: 1em; 
    margin-bottom: 1em; 
    margin-left: 1em; 
    margin-right: 1em; 
} 

सब, सामान्य रूप में सीएसएस के साथ समस्या यह थोड़ा अलग-अलग ब्लॉक साफ रखने नहीं है कहा करने के बाद। आपकी अधिक आम समस्या होगी, आप फ़ाइलों और फ़ाइलों के कुछ हिस्सों में नियम कैसे समूहबद्ध करते हैं?

उदाहरण के लिए, आप एक layout.css, theme.css (रंग, फ़ॉन्ट, आदि), और अलग-अलग सीएसएस डेटा-browser.css की तरह अपने आवेदन के विशिष्ट भागों को प्रभावित फ़ाइलें हो सकता था। फिर आप उन सीएसएस फ़ाइलों को एक मुख्य सीएसएस फ़ाइल से आयात करते हैं, या आप उन्हें आवश्यकतानुसार प्रत्येक पृष्ठ पर आयात करते हैं।

Answer 6

मेरे लिए तत्व के गुणों को वर्णित करना अच्छा है। यह प्रोग्रामर की आंख के लिए सरल, दृश्यमान और अच्छा है :)

उदा।

#my-id 
{ 
    color: #fff; 
    float: left; 
    font-weight: 
    height: 200px; 
    margin: 0; 
    padding: 0; 
    width: 150px; 
} 

उत्पादन से पहले यह सीएसएस compressors की some उपयोग करने के लिए प्रदर्शन में लाभ प्रदान करने के लिए अनुशंसा की जाती है।

Answer 7

मैं Why Programmers Suck at CSS Design शीर्षक पोस्ट में स्टेफ़ानो मज्ज़ोची के सुझावों की तरह। अन्य चीजों के अलावा, वह बताता है कि क्लीन स्लेट से कैसे शुरू किया जाए, चाहे एम या पीएक्स का उपयोग करना है, फोंट को कैसे परिभाषित किया जाए आदि। मैं सभी सुझावों का उपयोग नहीं करता (उदाहरण के लिए मैं किसी भी सीएसएस को आयात करने में संकोच नहीं करता - या कोई अन्य - - याहू से फ़ाइलें), लेकिन कुछ विचार बहुत अच्छे हैं।

और कुछ और सुझाव: 100 Exceedingly Useful CSS Tips and Tricks

Answer 8

सबसे "सर्वोत्तम प्रथाओं" के साथ के रूप में वहाँ कोई सही जवाब यहाँ है। मुझे लगता है कि दूसरों के सुझाव और शैलियों आमतौर पर हालांकि अच्छे हैं।

जब मैं सीएसएस प्यार मुझे लगता है कि सीएसएस हम सभी को इस संबंध में नाकाम रही है। भाषा पुरानी है और बड़ी और जटिल सीएसएस फ़ाइलों को व्यवस्थित करने में हमारी सहायता करने के तरीकों से बहुत सुधार कर सकती है। इस दिशा में एक अच्छा प्रयास http://LESScss.org है। उन्होंने चर, चरबी, घोंसले वाले नियमों और यहां तक ​​कि संचालन के साथ सीएसएस बढ़ाया है जो सीएसएस को बहुत अधिक DRY और प्रबंधनीय होने की अनुमति देता है।

यह/सत्य/सीएसएस नहीं है क्योंकि आपके पास preprocess the LESS to turn it into CSS है जो ब्राउज़र समझ जाएगा लेकिन यह एक तेज़ और आसान कदम है जो आपके सीएसएस को अनावश्यक बढ़ रहा है।

तो अगर आप सीएसएस बोझल पता लगा रहे हैं इसे आज़माने के लायक हो सकता है।

Answer 9

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

उदा। आइए कल्पना करें कि आप पुन: प्रयोज्य मॉड्यूल के लिए कुछ शैलियों को बना रहे हैं, जिनके शीर्ष स्तर तत्व में हमेशा वर्ग = "mymodule" है। सभी चयनकर्ताओं का उपयोग केवल उपयोग के लिए किया जाना चाहिए, फिर ".mymodule" से शुरू होना चाहिए - इसलिए ".item" ".mymodule .item" बनना चाहिए, आपके mymodule आइटम्स के शीर्षकों में चयनकर्ता होना चाहिए ".mymodule .item .title" आदि

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

उदाहरण:

.black-module { 
    background: #000; 
} 
.product { 
    color: #363; /* products look similar everywhere / } .black-module .product { color: #FCF; / products have lighter text if inside a black module / } .product .title { color: #030; / won't affect article titles / } .black-module .product .title { color: #FCF; / won't affect article titles or product titles in a non-black module / } .product .subtitle { color: #7A7; / looks good on all known module backgrounds, even black */ 
    }
 

.article .title { font-weight: bold; /*won't affect product titles */ }