सीएसएस कक्षाओं को कैसे व्यवस्थित किया जाए? संस्थाओं या पहलुओं से?

Question

मुझे आश्चर्य है कि क्या सीएसएस दर्शन में अच्छी तरह फिट:

1. सीएसएस वर्गों संस्थाओं निशान - या -
2. सीएसएस वर्गों को चिह्नित पहलुओं

उदाहरण के लिए चलो एक उत्पाद के लिए सेल ले मूल्य पत्रक और एक पाद लेख सेल जिसमें सभी कीमतों का योग शामिल है।

पहले मामले में प्रत्येक कोशिका में केवल एक वर्ग होगा: product-price resp। product-price-sum (या price और उदाहरण के लिए पंक्ति में product वर्ग है) दूसरे शब्दों में: कक्षा चीजों की पहचान करें।

दो मामले में कोशिकाओं कई वर्गों है, जो एक उत्पाद की कीमत के गुणों/पहलुओं को परिभाषित उदाहरण numeric और currency और पाद के लिए एक अतिरिक्त sum वर्ग के लिए, होगा। numeric टेक्स्ट को सही गठबंधन करने के लिए परिभाषित करेगा, sum सेल बोल्ड चिह्नित करेगा। दूसरे शब्दों में: कक्षा चीजों का वर्णन करें।

मैं यह तय नहीं कर सकता कि कौन सा दृष्टिकोण बेहतर है। अतीत में मैंने दोनों का मिश्रण इस्तेमाल किया जो जल्दी से विरोधाभासी शैलियों और कुछ बदसूरत !important हैक के साथ असंगठित सीएसएस वर्गों का बदसूरत ढेर का कारण बन गया।

पहला दृष्टिकोण स्पष्ट रूप से कुछ अनावश्यकता है, क्योंकि किसी के पास कई वर्ग (product-*) होंगे और उनमें से अधिकतर सामान्य सीएसएस गुण साझा करेंगे।

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

क्या इस समस्या को संभालने के तरीके पर अंगूठे, दिशानिर्देश, सिद्ध अवधारणाओं आदि के कोई नियम हैं?

Answer 1

बस एक अवलोकन ... लोग भूल जाते हैं कि सीएसएस पदानुक्रमित है। मैं आपको एक बहुत ही सरल नमूना देता हूँ (कृपया टैग न्यूनतम करने के लिए कम कर रहे हैं):

<table class="product"> 
    <thead> 
     <tr><th>Name</th><th class="price">Price</th></tr> 
    </thead> 
    <tbody> 
     <tr><td>Product 1</td><td class="price">1</td></tr> 
     <tr><td>Product 2</td><td class="price">2</td></tr> 
     <tr><td>Product 3</td><td class="price">3</td></tr> 
    </tbody> 
    <tfoot> 
     <tr><td>Total</td><td class="price">6</td></tr> 
    </tfoot> 
</table> 

आप टैग शैली के साथ वर्ग शैलियों रचना पिन करने के लिए कर सकते हैं जहां शैली aplied किया जाएगा:

table { /* styles for all tables */ } 
.product { /* styles for the product table */ } 
.product thead { /* styles for the all product table header row */ } 
.product thead th{ /* styles for header row generic column */ } 
.product thead .price { /* styles for header row price column */ } 
.product tbody { /* styles for the all product table data row */ } 
.product tbody td { /* styles for data row generic column */ } 
.product tbody .price { /* styles for data row price column */ } 
.product tfoot { /* styles for the all product table summarize row */ } 
.product tfoot td { /* styles for summarize row generic column */ } 
.product tfoot .price { /* styles summarize row price column */ } 

या फिर आप इस तरह केवल साधारण तालिका टैग (कोई वें, ठेड, tbody और tfoot टैग) का उपयोग कर सकते हैं:

<table class="product"> 
    <tr class="header"><td>Name</td><td class="price">Price</td></tr> 
    <tr class="data"><td>Product 1</td><td class="price">1</td></tr> 
    <tr class="data"><td>Product 2</td><td class="price">2</td></tr> 
    <tr class="data"><td>Product 3</td><td class="price">3</td></tr> 
    <tr class="footer"><td>Total</td><td class="price">6</td></tr> 
</table> 

और सीएसएस होगा

.product { /* styles for the product table */ } 
.product .header { /* styles for the all product table header row */ } 
.product .header td{ /* styles for header row generic column */ } 
.product .header .price { /* styles for header row price column */ } 
.product .data { /* styles for the all product table data row */ } 
.product .data td { /* styles for data row generic column */ } 
.product .data .price { /* styles for data row price column */ } 
.product .footer { /* styles for the all product table summarize row */ } 
.product .footer td { /* styles for summarize row generic column */ } 
.product .footer .price { /* styles summarize row price column */ } 

यह अंतिम समाधान नहीं है। समस्या के लिए बस एक नया दृष्टिकोण।

यह भी याद रखें कि आप कस्टम विशेषताओं का उपयोग कर सीएसएस को कुछ राज्य या अतिरिक्त जानकारी इंगित कर सकते हैं।

<table class="product"> 
    <tr class="header"><td>Name</td><td class="price">Price</td></tr> 
    <tr class="data"><td>Product 1</td><td class="price">1</td></tr> 
    <tr class="data" selected="selected"><td>Product 2</td><td class="price">2</td></tr> 
    <tr class="data"><td>Product 3</td><td class="price">3</td></tr> 
    <tr class="footer"><td>Total</td><td class="price">6</td></tr> 
</table> 

देखें "tr" टैग में "चयनित" विशेषता तालिका के मानक renderization में कोई प्रभाव नहीं है कि क्योंकि यह टैग का एक मान्यता प्राप्त विशेषता नहीं है, लेकिन यह पहचाना जा सकता है: इस नमूने देखें सीएसएस द्वारा (और जावास्क्रिप्ट द्वारा जो यहां मामला नहीं है)। इस तरह:

.product tr[selected=selected] { /* styles for the selected row */ } 

Answer 2

मैं श्रेणी = 'उत्पाद-मूल्य' (1 टैग) की बजाय इकाई (विशेषता तत्व, बजाय व्यक्तिगत तत्व के बजाय) द्वारा वर्गीकरण की सिफारिश करता हूं, इसलिए कक्षा = 'उत्पाद मूल्य' (2 टैग)। यदि आप सावधान हैं, तो इसका परिणाम क्लीनर, कोड को बनाए रखना आसान होगा। यदि आपको परेशानी हो रही है! महत्वपूर्ण है, टैग को संरचित करने के तरीके के पेड़ को चित्रित करने का प्रयास करें। यह तय करेगा कि पेड़ के किस स्तर पर कुछ गुण घोषित किए जाएंगे, और नतीजतन इसका न्यूनतम उपयोग महत्वपूर्ण होगा।

Answer 3

मुझे नहीं लगता कि कोई सही जवाब है, लेकिन आप उस दृष्टिकोण का पक्ष लेना चाहते हैं जिसके परिणामस्वरूप सबसे साफ सीएसएस और कम से कम दोहराव हो। मेरे लिए व्यक्तिगत रूप से मैं कहूंगा कि आप अपने दो विकल्पों के बीच कुछ चाहते हैं, लेकिन विकल्प दो के करीब।

मैं अपने विवरण सही ढंग से समझ रहा हूँ, तो विकल्प के साथ, आप कुछ इस तरह होगा:

<table> 
    <tr> 
    <td>Product A</td> 
    <td class="price">£1</td> 
    </tr> 
    <tr> 
    <td>Product B</td> 
    <td class="price">£2</td> 
    </tr> 
    <tr> 
    <td>Total</td> 
    <td class="price-sum">£3</td> 
    </tr> 
</table> 

और फिर सीएसएस:

.price { 
    text-align: right; 
} 

.price-sum { 
    text-align: right; 
    font-weight: bold; 
} 

और विकल्प दो और जैसा होगा इस:

<table> 
    <tr> 
    <td>Product A</td> 
    <td class="numeric currency">£1</td> 
    </tr> 
    <tr> 
    <td>Product B</td> 
    <td class="numeric currency">£2</td> 
    </tr> 
    <tr> 
    <td>Total</td> 
    <td class="numeric currency sum">£3</td> 
    </tr> 
</table> 

लेकिन क्यों नहीं:

<table> 
    <tr> 
    <td>Product A</td> 
    <td class="price">£1</td> 
    </tr> 
    <tr> 
    <td>Product B</td> 
    <td class="price">£2</td> 
    </tr> 
    <tr> 
    <td>Total</td> 
    <td class="price sum">£3</td> 
    </tr> 
</table> 

और:

.price { 
    text-align: right; 
} 

.sum { 
    font-weight: bold; 
} 

एक सेल दे रही है कोई मतलब नहीं है दोनों 'सांख्यिक' और 'मुद्रा' सभी मुद्रा फ़ील्ड को हमेशा दोनों वर्गों होगा यदि - में संख्यात्मक रूप में मुद्रा एक ही शैली देने के लिए बेहतर स्टाइलशीट और फिर बस स्रोत मुद्रा का उपयोग करें:

.numeric, .currency { 
    // etc. 
} 

.currency { 
    // etc. 
} 

अपने अपवाद के लिए आसपास के HTML टैग का उपयोग करना ठीक है अगर आप एक अर्थ तरह से ऐसा कर सकते हैं। उदाहरण के लिए आपके पास मुद्रा वर्ग पर कुछ सामान्य शैलियों हो सकती हैं, लेकिन फिर एक टेक्स्ट-संरेखण: विशेष रूप से td.currency पर।

एकमात्र अन्य बात जो मैं कहूंगा वह यह है कि यदि आप उपयोग कर रहे हैं! अपनी खुद की शैलियों को ओवरराइड करने के लिए महत्वपूर्ण है, तो आप कुछ गलत कर रहे हैं!

Answer 4

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

सीएसएस नियमों और specificity के पूरे बिंदु को "संबोधित" नहीं कर रहा है? मुझे लगता है कि "एड्रेसिंग" और "नेमस्पेसिंग" जैसे अधिक;)

व्यक्तिगत रूप से, मैं दूसरी विधि पसंद करता हूं; मैं चीजों की पहचान करने के लिए id विशेषता का उपयोग करना पसंद करता हूं;)
... लेकिन class विशेषता को element identifier माना जाता है।

अंत में, कक्षा विशेषता का उद्देश्य "for general purpose processing by user agents." का उपयोग किया जाता है, मैं इसका अर्थ यह समझता हूं कि आपके द्वारा दिए गए मानों को आपके आवेदन की ज़रूरतों को पूरा करना चाहिए।

तो आपके आवेदन सभी उत्पाद की कीमतों की पहचान करने की जरूरत है - सीएसएस स्टाइल के लिए या एक jQuery स्क्रिप्ट या एक स्क्रीन रीडर या जो कुछ भी के लिए यह हो - उन्हें product-prices के एक वर्ग विशेषता के साथ की पहचान।

यदि आपके एप्लिकेशन को सभी संख्यात्मक मानों का वर्णन करने की आवश्यकता है - फिर, इसे सीएसएस स्टाइल या एक jQuery स्क्रिप्ट या स्क्रीन रीडर या जो भी हो - numeric की कक्षा विशेषता के साथ पहचानें।

पीएस Please don't call it the CSS class; इसे बस "class विशेषता" कहते हैं। जब तक आप Asp.NET में काम नहीं कर रहे हैं, CSS class जैसी कोई चीज़ नहीं है, और यहां तक ​​कि Asp.NET में भी - CSS class नहीं होना चाहिए।

मेरी अपनी वेबसाइट पर कई लापरवाह लिंक के लिए खेद है।

Answer 5

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

.product    { } 
.product h1   { } 
.product span.price { } 
.product span.discount { } 

के लिए एक ही कहना देता है नेविगेशन:

ul.navigation   { } 
ul.navigation li  { } 
ul.navigation li.first { } 
ul.navigation li.last { } 

और उस ने कहा, मैं हमेशा कहते थे खोने के बिना विकल्प है जो के लिए जाना मार्कअप के कम से कम राशि है, के साथ अपने अवलोकन। साफ कोड अच्छा है।