सबसे अच्छा तरीका सीएसएस

Question

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

मैं एक मिनट ऊंचाई देना चाहता हूँ लगता है, मैं इस का उपयोग करना चाहिए:

.div1,.div2,.div3{min-height:335px;} 

और इस तरह HTML का उपयोग:

<div class="div1">afads</div> 
<div class="div2">fads</div> 
<div class="div3">fads</div> 

या मैं इसे इस तरह करना चाहिए: सीएसएस:

.minheightstyle{min-height:225px;} 
.leftitems{float:left;} 
.red{background-color:red;} 
.blue{background-color:blue;} 
.grey{background-color:grey;} 

HTML:

<div class="minheightstyle leftitems red">my text in red bg</div> 
<div class="minheightstyle leftitems blue">my text in blue bg</div> 
<div class="minheightstyle leftitems grey">my text in grey bg</div> 

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

Answer 1

.text {in-height:225px; float:left;} 
.red{background-color:red;} 
.blue{background-color:blue;} 
.grey{background-color:grey;} 

<div class="text red">my text in red bg</div> 
<div class="text blue">my text in blue bg</div> 
<div class="text grey">my text in grey bg</div> 

Answer 2

मैं न तो करूंगा। मैं पहले नहीं करूँगा, क्योंकि तत्वों के लिए समान शैलियों के लिए कक्षाएं क्या हैं।

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

<div class="font-size color margin text padding float-left">some div</div> 

उपर्युक्त में यह केवल इनलाइन सीएसएस का उपयोग करने के लिए डरावना है। उपरोक्त के रूप को बदलने के लिए आपको कक्षा के बजाय वास्तविक HTML को बदलने की आवश्यकता होगी।

मैं बल्कि एक सामान्य वर्ग बनाउंगा बजाय हो सकता है कि रंग के लिए class="font-verdana margin color" आदि बताता है कि आपको एक बिंदु हो सकता है क्योंकि आप तीन div के लिए अलग अलग रंग का उपयोग करना चाहते हैं, लेकिन सामान्य रूप में उन तीन div रों एक ही कक्षा होनी चाहिए के एक लेख की स्टाइल के साथ article।

Answer 3

तकनीकी रूप से इससे कोई फर्क नहीं पड़ता क्योंकि दोनों एक ही काम करेंगे।

हालांकि लक्ष्य है अपने सीएसएस, स्पष्ट फिर से प्रयोग करने योग्य और आदर्श कम से कम करने के लिए होना चाहिए, और आप इस दिखाने के लिए अपने चयनकर्ताओं और नियमों को लक्षित करना चाहिए। पृष्ठभूमि और रंग की तरह

कुछ नियमों आमतौर पर केवल किसी विशिष्ट तत्व के लिए लागू होगी। यही वजह है कि आप तत्व आप लक्षित करना चाहते की आईडी पर लागू करना चाहिए:

<div id="header">XXX</div> 

#header { 
    background-color: red; 
    color: #000; 
} 

याद रखें: आईडी के अद्वितीय होना चाहिए और केवल पृष्ठ पर एक एकल तत्व पर लागू। जब आप एकाधिक तत्वों को लक्षित करना चाहते हैं तो कक्षाओं का उपयोग किया जाता है।

आप मदों की एक संख्या के लिए नियमों को लागू करने रहे हैं, तो आप वर्ग का उपयोग करना चाहते हैं। ऐसे कई अवसर हैं जहां नियम आपके दूसरे उदाहरण के समान लागू होते हैं, जैसे वर्ग clearfix जिसे अक्सर बड़ी संख्या में तत्वों पर लागू किया जाता है। उदाहरण के लिए दूसरों को थोड़ा अनावश्यक हो सकता है।यह अक्सर निजी पसंद है

.parent > div { 
    min-height:335px; 
} 

दिन के अंत में, लेकिन सिर्फ याद रखें कि अपने कोड के रूप में किया जाना चाहिए: अपने पहले उदाहरण में आप माता-पिता आवरण को लक्षित करने के लिए, तो इस तरह की एक नियम है बेहतर होता जितना संभव हो उतना साफ।

एक बात मैं हमेशा ध्यान में रखना जब कोड लिखने "अगर मैं एक और डेवलपर को यह गुजरती हैं, वे समझने के लिए एक नज़र में चल रहा है में सक्षम हो जाएगा?"

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

किसी भी उन्नत उपयोगकर्ताओं यह पढ़ रहा सीएसएस बजाय एससीएसएस का उपयोग कर के रूप में यह ऊपर बहुत आसान से कुछ कर सकते हैं, क्योंकि यह घोंसले की अनुमति देता है और अपने सीएसएस के भीतर चर के लिए सिफारिश करेंगे

- http://sass-lang.com/

आशा है कि मदद करता है !!

Answer 4

मैं कक्षाओं का नाम उनके प्रतिनिधित्व के लिए नाम दूंगा, न कि वे किस तरह दिखते हैं। तो एक वर्ग red एक बुरा विचार है। जब आप तय करते हैं कि सभी लाल पाठ वास्तव में नीला होना चाहिए, अगर आप इस तरह सीएसएस लग सकती है:

.red { 
    color: blue; 
} 

मतलब नहीं है कि और वास्तव में स्टाइल और अधिक कठिन बना देता है।

Answer 5

अगर सब div एक ही सीएसएस शैली होनी चाहिए सिर्फ एक वर्ग का उपयोग करें और यह आपके सभी div को दे आप हर div के लिए कई वर्ग उपयोग करना चाहते हैं नहीं:

<div class="divv">afads</div> 
<div class="divv">fads</div> 
<div class="divv">fads</div>r code here 

.divv {न्यूनतम ऊंचाई: 335 पीएक्स;}

Answer 6

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

#parent > div { 
    min-height: 300px; 
} 

यदि इनमें से कोई (उदाहरण के लिए) एक चयनित मेनू आइटम है

#selected { 
    min-height: 300px; } 

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

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

* { 
    margin: 0; padding: 0; } 

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

<div id="menu"> 
     <div>Apples</div> 
     <div>Oranges</div> 
     <div>Bananas</div> 
</div> 

#menu > div { 
     background-color: brown; 
} 

या

#menu { 
     background-color: brown; 
} 

अपने तत्काल समस्या के रूप में, अंगूठे का एक अच्छा शासन दोनों मार्कअप और शैली सहित, कोड को कम करना है। बच्चों के लिए समान वर्ग के नाम से छुटकारा, सीएसएस वर्ग के नाम के बिना इन का चयन पूरी तरह से सक्षम है:

<div id="foo"> 
    <div>my text in red bg</div> 
    <div>my text in blue bg</div> 
    <div>my text in grey bg</div> 
</div> 

#foo > div 
{ 
    min-height: 300px; 
    float: left; 
} 

#foo > div:nth-child(1) 
{ 
    color: red; 
} 

#foo > div:nth-child(2) 
{ 
    color: green; 
} 

#foo > div:nth-child(3) 
{ 
    color: blue; 
} 

बेशक

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