आवश्यकताओं को बदलने पर सीएसएस को कैसे संशोधित करें?

मान लीजिए मुझे उन पृष्ठों पर कुछ पेज जेनरेट करने की आवश्यकता दी गई है जिन पर टेबल हैं। मूल आवश्यकता सभी टेबलों के लिए 500px होने के लिए है।आवश्यकताओं को बदलने पर सीएसएस को कैसे संशोधित करें?

मैं इस प्रकार के रूप में मेरे सीएसएस लिखते हैं:

table 
{ 
    width: 500px; 
}

कि सभी तालिकाओं के लिए बोर्ड भर में लागू होगी। अब, अगर वे आवश्यकता को बदलते हैं तो कुछ टेबल 600px हैं। सीएसएस को संशोधित करने का सबसे अच्छा तरीका क्या है? क्या मुझे टेबल कक्षाएं देनी चाहिए ताकि

table.SizeOne 
{ 
    width: 500px; 
} 

table.SizeTwo 
{ 
    width: 600px; 
}

या इस तरह के बदलावों से निपटने के लिए मेरे लिए एक बेहतर तरीका है?

स्रोत

2010-06-17 DaveDev

यह मेरे लिए ऐसा करने का सही तरीका है। मैं इसे इस तरह से करता हूं, यही कक्षाएं और आईडी हैं :) – Kyle

यह एक अच्छा दृष्टिकोण प्रतीत होता है, हालांकि आप उन्हें अधिक सार्थक नाम देना चाहते हैं;) – ChrisF

आरई सीएसएस नाम जो मैंने उपयोग किया है, यह केवल के लिए है उदाहरण के लिए। मेरे द्वारा उत्पादित कोई भी वास्तविक सीएसएस अधिक अर्थपूर्ण रूप से नामित किया गया है। धन्यवाद सभी :-) – DaveDev

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

आप मानक और 600px अपवाद के रूप में के रूप में 500px टेबल पर विचार कर सकते हैं, तो शायद और अधिक उपयोगी होगा एक डिफ़ॉल्ट सेट करने के लिए जारी:

table 
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */ 
{ 
    width: 600px; 
}

स्रोत

2010-06-17 12:35:59 e100

या उसके पास 3. एक डिफ़ॉल्ट "तालिका" है और फिर "टेबल। आकार" और "टेबल.SizeTwo" नामक नए ऑनिस हैं। (और शायद बेहतर नामों का उपयोग करें)। – Johan

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

स्रोत

2010-06-17 12:23:09

आप सही हैं - यह केवल उदाहरण के लिए था। मेरे द्वारा उत्पादित किसी भी वास्तविक सीएसएस में ऐसे नाम हैं जो दर्शाते हैं कि यह क्या है, यह कैसा दिखाई देता है। – DaveDev

व्यक्तिगत रूप से मैं नेविगेशन या सामग्री जैसे काम करने के बाद नामित कक्षाओं का उपयोग करना पसंद करता हूं। यदि आप आकार निर्दिष्ट करने के लिए कक्षा के नामों का उपयोग कर रहे हैं तो यह इनलाइन शैलियों को करने के तरीके के बारे में एक दौर की तरह लगता है। सीएसएस में आने और देखने वाले व्यक्ति को वास्तव में पता नहीं होगा कि वे किसके साथ काम कर रहे थे।

स्रोत

2010-06-17 12:24:35

मैं ज्यादातर मामलों में वही करता हूं, लेकिन आकार को इंगित करने के लिए कक्षा के नामों का उपयोग करना एक वर्णनात्मक 'आईडी' के साथ संयुक्त होने पर बुरा नहीं है। फिर '# खोज-परिणाम। पृष्ठ-व्यापी 'के साथ-साथ' # खोज-परिणाम .column-wide' का उपयोग किया जा सकता है। यह बहुत स्पष्ट और वर्णनात्मक है। –

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

-5

मैं इसे लिखते थे:

table 
{ 
    width: 500px; 
}

और प्रयोग SVN की तरह संस्करण नियंत्रण कुछ। आपका सुझाव क्या चीजें अविश्वसनीय रूप से जटिल बनाता है। या संस्करण नियंत्रण के बिना:

table 
    { 
     /*width: 500px;*/ 
     width: 600px; 

    }

वर्गों के बहुत सारे जोड़ना मेरी राय में सीएसएस का उद्देश्य धरा।

स्रोत

2010-06-17 12:31:12 matpol

ओपी को केवल नई चौड़ाई के लिए * कुछ * टेबल की आवश्यकता है। अन्य पुराने में रहते हैं। – ChrisF

ओह - स्वयं को नहीं - हमेशा प्रश्न को ठीक से पढ़ें – matpol

आप कक्षाओं को और परिभाषित कर सकते हैं जो शरीर वर्ग (शरीर टैग के लिए दी गई कक्षा) का उपयोग करके मूलभूत सेटिंग्स को ओवरराइड कर सकते हैं। उदाहरण यदि आपकी तालिका सामान्य चौड़ाई (bodyclass 'पृष्ठ 2' के साथ) से 100 और एक विशेष पेज में सेट किया गया है के लिए , क्या आप इसे पसंद

table{ 
width: 100px; 
} 

.page2 table { 
width :50px; 
}

कर सकते हैं 50px के रूप में चौड़ाई की आवश्यकता है, तो द्वितीय श्रेणी होगा पूर्व में एकमात्र पृष्ठ के लिए सवारी करें जिसमें बॉडीक्लास = "पृष्ठ 2" है और हर जगह चौड़ाई 100 होगी।

अनुभाग के आधार पर शरीर के लिए कक्षा का नाम सेट करना एक अच्छा अभ्यास है।

स्रोत

2010-06-17 12:32:51

आप कई अलग अलग पेज चौड़ा लेआउट है, तो आप हो सकता है कुछ लेआउट वर्गों बनाने और उन्हें अपने शरीर के लिए संलग्न से लाभ (या अन्य युक्त टैग):

<body class="wide"> 
    <!-- stuff --> 
    <table>...</table> 
</body>

फिर अपने सीएसएस में

table {width:500px} /* defaults for all tables regardless of class */ 
body.wide table {width:600px} /* overrides for specific layouts */ 
body.slim table {width:300px}

यह समय की बर्बादी की तरह दिखता है और यह केवल एक टेबल के लिए होगा, लेकिन यदि आप अलग-अलग छवियों, divs, आदि को स्टाइल कर रहे हैं, तो आप बहुत सारे HTML मार्कअप को सहेज सकते हैं।

#wrapper {width:500px;padding:20px 10px} 
body.wide #wrapper {width:600px} 
body.slim #wrapper {width:300px;padding:10px 5px} 

table {width:500px} /* defaults for all tables regardless of class */ 
body.wide table {width:600px} /* overrides for specific layouts */ 
body.slim table {width:300px} 

img {width:500px} 
body.wide img {width:600px} 
body.slim img {width:300px}

आपका अपने HTML के 99% एक ही शरीर वर्ग (बहुत उपयोगी आप किसी डाटाबेस की खींच रहे हैं और यह हर बार जब आप इसे उपयोग करने के अनुकूल करने के लिए नहीं करना चाहते हैं), तो आप सिर्फ बदल रहता है।

स्रोत

2010-06-17 12:39:32 Oli

सर्वश्रेष्ठ तरीका उन तालिकाओं को संशोधित करना होगा जो उनके माता-पिता हैं।

<body id="contacts"> 
    <table> 
    <tr> 
     <td>Content</td> 
    </tr> 
    </table> 
</body>

अपने सीएसएस में

तो होगा: उदाहरण के लिए, कुछ पन्नों को भिन्न आईडी, जैसे होना चाहिए

table { 
    width: 500px; 
} 

#contacts table { 
    width: 600px; 
}

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

यदि आपका एचटीएमएल उचित कैस्केडिंग के साथ लिखा नहीं गया था, तो आप कक्षाओं को केवल टेबल में जोड़ने के बजाय तत्वों को उचित आईडी जोड़ना बेहतर कर रहे हैं। आपके द्वारा किए जाने वाले कार्यों के लिए भुगतान बहुत अधिक है।

स्रोत

2010-06-17 12:39:59 nyousefi

यह समाधान ठीक है जब तक कि एक ही पृष्ठ पर 500px चौड़ा और 600px विस्तृत तालिका दोनों की आवश्यकता नहीं है। तब यह समाधान काम नहीं करेगा। –

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

+1। आपको इसे उत्तर में जोड़ने पर विचार करना चाहिए। –

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

यह सभी तालिकाओं के लिए बोर्ड भर में लागू होगा। अब, अगर वे आवश्यकता को बदलते हैं तो कुछ टेबल 600px हैं।

यह आवश्यकता केवल "कुछ टेबल 600px चौड़ी" नहीं कहेंगी और यदि आपको आवश्यकताएं पूरी करने के लिए बेहतर तरीके की आवश्यकता है।

इसके बजाय यह शायद "एचआर 'स्टाफ निर्देशिका' पृष्ठ पर टेबल 600px चौड़ा होगा।" सीएसएस नियम विशेष रूप से प्रतिबिंबित करें!

body#staff-directory table { 
    width:600px; 
}

... या "खोज परिणामों की टेबल 600px विस्तृत हो जाएगा।":

table.search-results { 
    width:600px; 
}

आप अपनी आँखें रोल और सोच सकते हैं "लेकिन फिर मैं इतने सारे समान सीएसएस नियम है!" लेकिन वे पहले से ही अपने दिमाग बदल चुके हैं, इसलिए आश्चर्यचकित न हों जब वे इसे फिर से करते हैं!

क्लाइंट फिर से आवश्यकताओं को बदलता है और "एचआर 'स्टाफ निर्देशिका' पृष्ठ पर टेबल्स 600px चौड़ा होगा; खोज परिणामों की तालिका 800px चौड़ी होगी और अन्य सभी 'अनावश्यक' नियम काम में आ जाएंगे। टेबल 500px चौड़े हैं। "
अब उन क्रमी, गैर-वर्णनात्मक सीएसएस गुण "आकार 1" और "आकार 2" ने आपको पैर में गोली मार दी है।

स्रोत

2010-06-17 12:46:39

इसे वापस घुमाया क्योंकि मैं जानबूझकर अपने सीएसएस नियमों में 'आईडी' और 'कक्षा' दोनों का उपयोग करना चाहता था। –

यही वह है जो मुझे लिखा जाना चाहिए था! आपके पास एक शैली हो सकती है और इसे कई चयनकर्ताओं पर लागू कर सकते हैं उदा। शरीर # कर्मचारी-निर्देशिका तालिका, तालिका। खोज-परिणाम { चौड़ाई: 600 पीएक्स; } इस प्रकार मैं पतला केसीएसएस किया जाना चाहिए। – matpol

आवश्यकताओं को बदलने पर सीएसएस को कैसे संशोधित करें?

उत्तर

संबंधित मुद्दे