क्या मैं गैर मौजूदा सीएसएस कक्षाओं का उपयोग कर सकता हूं?

Question

मेरे पास एक तालिका है जहाँ मैं jQuery द्वारा CSS वर्ग के माध्यम से एक पूर्ण स्तंभ दिखाता / छिपाता हूँ जो मौजूद नहीं है:

<table>
   <thead>
      <tr>
         <th></th>
         <th class="target"></th>
         <th></th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td class="target"></td>
         <td></td>
      </tr>
   </tbody>
</table>

इस डोम के साथ मैं इसे jQuery के माध्यम से एक पंक्ति में कर सकता हूं: $('.target').css('display','none');

यह पूरी तरह से काम करता है, लेकिन क्या यह सीएसएस वर्गों का उपयोग करने के लिए वैध है जो परिभाषित नहीं हैं? क्या मुझे इसके लिए एक खाली वर्ग बनाना चाहिए?

<style>.target{}</style>

क्या इसके कोई दुष्प्रभाव हैं या ऐसा करने का कोई बेहतर तरीका है?

Comments

मुझे इसके बारे में कुछ भी गलत नहीं दिख रहा है, हालाँकि मैंने इसे स्टाइलशीट का हिस्सा बना लिया होता, अगर इस्तेमाल करने के बजाय संभव हो तो .css, .cs के साथ सेट की गई शैलियों को अन्य मुद्दों को पैदा किए बिना ओवरराइड करना बहुत मुश्किल होता है इसलिए मैं उनसे बचता हूं।

— केविन बी

एक साइड नोट के रूप में आप .toggle()इसका उपयोग करना चाह सकते हैं , यह आपके कोड में थोड़ा छोटा है।

— गणित चिलर

Visual Studio + ReSharper में, यदि आप एक ऐसे वर्ग का उपयोग करते हैं जो परिभाषित नहीं है, तो यह आपको एक चेतावनी देगा, जो कि यदि मेरे पास सिर्फ एक टाइपो है तो मददगार है, लेकिन इस तरह की स्थितियों में कष्टप्रद है। इस मामले में, आपको या तो खाली शैली जोड़ने का विकल्प मिला है, या चेतावनी को अक्षम करने (या बस इसे अनदेखा करना) - व्यक्तिगत रूप से, मैं सिर्फ खाली शैली जोड़ता हूं। मुझे नहीं पता कि क्या कोई अन्य आईडीई भी इसी तरह का व्यवहार करता है।

— जो एनोस सिप

यह न केवल संभव है, बल्कि स्पष्ट रूप से कुछ लोगों द्वारा सुझाया गया है। चूंकि आपका targetजावास्क्रिप्ट उद्देश्यों के लिए है, बहुत सारे लोग js-ऐसी कक्षाओं के लिए उपसर्ग का उपयोग करते हैं, अर्थात js-target। BTW: लक्ष्य एक बुरे नाम की तरह है;) आगे पढ़ने के लिए देखें: philipwalton.com/articles/decoupling-html-css-and-javascript

— k0pernikus

इस गलत धारणा के बिना, stackoverflow.com/questions/2832117/… कमोबेश इसका एक डुप्लिकेट है।

— n

Answer 1

"सीएसएस वर्ग" एक मिथ्या नाम है; classएक विशेषता है (या एक संपत्ति, स्क्रिप्टिंग के संदर्भ में) जो आप HTML तत्वों को असाइन करते हैं। दूसरे शब्दों में, आप अपने मामले 'लक्ष्य' कक्षा में एचटीएमएल, सीएसएस नहीं में कक्षाओं का ऐलान करते हैं तो करता है उन विशिष्ट तत्वों पर तथ्य यह है अस्तित्व में है, और अपने मार्कअप पूरी तरह से वैध यह है के रूप में है।

यह जरूरी नहीं कि सीएसएस में उपयोग करने से पहले आपको HTML में घोषित वर्ग की आवश्यकता हो। देखिए रुख का कमेंट चयनकर्ता मान्य है या नहीं यह पूरी तरह से चयनकर्ता वाक्यविन्यास पर निर्भर करता है , और सीएसएस के पास पार्सिंग त्रुटियों से निपटने के लिए नियमों का अपना सेट है , जिनमें से कोई भी मार्कअप की चिंता नहीं करता है। अनिवार्य रूप से, इसका मतलब है कि HTML और CSS वैधता पहलू में एक दूसरे से पूरी तरह से स्वतंत्र हैं। ¹

एक बार जब आप समझ जाते हैं, तो यह स्पष्ट हो जाता है कि .targetआपकी स्टाइलशीट में किसी नियम को परिभाषित नहीं करने का कोई दुष्प्रभाव नहीं है । ² जब आप अपने तत्वों को कक्षाओं को असाइन करते हैं, तो आप उन तत्वों को उन कक्षाओं द्वारा संदर्भित कर सकते हैं या तो एक स्टाइलशीट, या एक स्क्रिप्ट, या दोनों। न ही दूसरे पर निर्भरता है। इसके बजाय, वे दोनों मार्कअप (या, अधिक सटीक, इसके डोम प्रतिनिधित्व) का उल्लेख करते हैं। यह सिद्धांत लागू होता है, भले ही आप शैलियों को लागू करने के लिए जावास्क्रिप्ट का उपयोग कर रहे हों, जैसा कि आप अपने jQuery के वन-लाइनर में कर रहे हैं।

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

---

¹ _{यह भी क्यों एक सीएसएस आईडी चयनकर्ता दिए गए आईडी के साथ सभी तत्वों से मेल खाता है चाहे आईडी एक बार दिखाई दे या कई बार (परिणामस्वरूप गैर-अनुरूपण HTML दस्तावेज़)।}

² _{एक ही स्थिति से मैं अवगत हूँ जहाँ एक खाली सीएसएस नियम आवश्यक है, जब कुछ ब्राउज़र बग के परिणामस्वरूप कुछ अन्य नियमों को ठीक से लागू करने से इनकार करते हैं; एक खाली नियम बनाने के कारण उन अन्य नियमों को किसी कारण से लागू किया जाएगा। इस तरह के बग के उदाहरण के लिए यह उत्तर देखें । हालाँकि यह CSS की तरफ है और इसलिए मार्कअप से इसका कोई लेना देना नहीं है।}

Comments

मुझे यह महसूस करने में उम्र लग गई कि कक्षाओं का सीएसएस से कोई लेना-देना नहीं है। लेकिन उसी समय के आसपास हर किसी को एहसास हुआ और माइक्रोफ़ॉर्मेट्स साथ आए।

— कोनराड रूडोल्फ

+1, हालाँकि यह उत्तर गलत होने के रूप में लिया जा सकता है, गलत यह है कि CSS केवल उन कक्षाओं को संदर्भित कर सकता है जो वास्तव में HTML में होते हैं। यह वास्तव में साइट के लिए सभी पृष्ठों पर उपयोग किए जाने वाले साइटवाइड सीएसएस के लिए काफी सामान्य है, भले ही इसमें से कुछ कक्षाएं प्रत्येक एकल पृष्ठ पर दिखाई न दें। (उदाहरण के लिए, साइट में बाहरी लिंक के लिए कस्टम स्टाइल हो सकता है, a.extlinkया

— व्हाट्सएप

@ruakh: उत्कृष्ट बिंदु, धन्यवाद। ऑफ-टॉपिक को वीयर किए बिना मुझे इसे अपने मूल, संक्षिप्त उत्तर में फिट करने का कोई तरीका नहीं मिल रहा था, लेकिन मैं देख रहा हूं कि निर्भरता शब्द के उपयोग ने उस धारणा को कैसे दिया होगा इसलिए मैंने इसे थोड़ा बदल दिया। कहा कि मैंने आपकी टिप्पणी को संदर्भित करने के साथ-साथ आगे विस्तार से एक फुटनोट भी जोड़ा है।

— BoltClock

Answer 2

जिन कक्षाओं में शैलियाँ नहीं हैं उनका उपयोग करने के लिए कोई बुरा प्रभाव नहीं है। दरअसल, यह CSS की उपयोगिता का हिस्सा है कि यह मार्कअप से डी-कपल है और स्टाइल एलिमेंट्स / क्लासेस / आदि स्टाइल या नहीं कर सकता है। जैसी जरूरत थी।

उन्हें "सीएसएस वर्गों" के रूप में मत सोचो। उन्हें "कक्षाएं" के रूप में सोचें जो सीएसएस होता है, अगर इसका उपयोग करने की आवश्यकता होती है।

Comments

+1 के लिए "सीएसएस कक्षाओं के रूप में उनके बारे में मत सोचो।" उन्हें 'कक्षाएं' के रूप में सोचें, जो सीएसएस का उपयोग करने के लिए होता है, अगर इसे ज़रूरत हो तो "

— laike9m

Answer 3

HTML5 विनिर्देश के अनुसार :

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

इसके अलावा, संस्करण 4 में :

HTML में वर्ग विशेषता की कई भूमिकाएँ हैं:

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

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

Comments

प्रासंगिक ऐनक उद्धृत करने के लिए +1। मैं बहुत कुछ करना भूल गया हूं।

— BoltClock

Answer 4

आप एक ऐसे वर्ग का उपयोग कर सकते हैं जिसकी कोई शैली नहीं है, यह पूरी तरह से मान्य HTML है।

CSS फ़ाइल में संदर्भित एक वर्ग वर्ग की परिभाषा नहीं है, इसका उपयोग a के रूप में किया जाता है स्टाइल के प्रयोजनों के लिए चयनकर्ता नियम के है।

Answer 5

जब आप जावास्क्रिप्ट में एक वर्गनाम का उपयोग करते हैं, तो यह नहीं होता है उस वर्ग को खोजने के लिए सीएसएस को देखता है। यह सीधे HTML कोड में दिखता है।

सभी आवश्यक है कि क्लासनाम HTML में हो। इसे CSS में होने की आवश्यकता नहीं है।

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

(ध्यान दें, उपरोक्त पैराग्राफ स्पष्ट रूप से बड़ी परियोजनाओं के लिए अधिक लागू है, इसलिए यह महसूस न करें कि यदि आप अपने दम पर हैं, तो आपको इस चरम पर जाना होगा; मैंने इस बात का उल्लेख किया है कि दोनों पूरी तरह से अलग हो सकते हैं। )

Answer 6

आप इसका उपयोग किए बिना CSS कक्षाओं का उपयोग कर सकते हैं , लेकिन मेरा सुझाव है कि यदि आप केवल जावास्क्रिप्ट / jQuery कोड के लिए CSS कक्षाएं जोड़ रहे हैं, js-YourClassNameतो इसके साथ उपसर्ग करें ताकि फ्रंट-एंड डेवलपर्स इन कक्षाओं का उपयोग तत्वों को स्टाइल करने के लिए कभी न करें। उन्हें समझना चाहिए कि इन वर्गों को किसी भी समय हटाया जा सकता है।

Answer 7

जिस क्षण आप अपने HTML में कक्षा जोड़ते हैं वह कक्षा परिभाषित हो जाएगी, इसलिए आपका समाधान पूरी तरह से ठीक है

Comments

HTML में कक्षा का उपयोग करना इसे परिभाषित नहीं करता है। मैं कहूंगा कि, परिभाषा अप्रासंगिक है: अपरिभाषित वर्गों का उपयोग करने के लिए कोई जुर्माना नहीं है।

— जाल

Answer 8

अपनी स्टाइलशीट में सीएसएस कक्षाओं को परिभाषित करना आवश्यक नहीं है । यह ठीक काम करना चाहिए। हालांकि, इसे जोड़ने से कोई नुकसान नहीं होगा।

Comments

मैं उन शैलियों को जोड़ने के लिए नहीं कह रहा हूँ, यदि वह चाहता है तो उसके ऊपर, अगर वह उन शैलियों का समर्थन करने की योजना बना रहा है तो क्यों नहीं? वैसे भी अनावश्यक डाउन वोट के लिए धन्यवाद :)

— रमीज

आपने कहा "यह ... नुकसान नहीं करेगा", लेकिन यह अंततः होगा।

— पावलो

हाँ, इससे कोई नुकसान नहीं होगा। अगर उसे उन खाली शैलियों को जोड़ने के लिए होश है, तो जाहिर है कि उन्हें प्रबंधित करने के लिए इंद्रियां होंगी। जाहिर है मैं जोड़ने के लिए नहीं .. या तो मैं जोड़ने की सलाह दे रहा हूँ।

— रमीज

Answer 9

एक बात जो यहां किसी ने भी पूरी तरह से नहीं बताई है, वह यह है कि जावास्क्रिप्ट (इस मामले में jQuery द्वारा सहायता प्राप्त) किसी दस्तावेज़ के कैस्केडिंग स्टाइल शीट को सीधे संशोधित करने में सक्षम नहीं है। jQuery की css()विधि केवल तत्वों की styleसंपत्ति के मिलान सेट को बदल देती है । सीएसएस और जावास्क्रिप्ट इस पहलू में पूरी तरह से असंबंधित हैं।

$('.target').css('display','none');अपने .target { }सीएसएस घोषणा को बिल्कुल भी नहीं बदलता है । इसके बजाय यहाँ क्या हुआ है कि class"लक्ष्य" के साथ कोई भी तत्व अब कुछ इस तरह दिखता है:

<element class="target" style="display:none;"></element>

सीएसएस शैली नियम को पूर्व-परिभाषित नहीं करने के कारण क्या कोई दुष्प्रभाव हैं? कोई भी नहीं, कुछ भी नहीं।

क्या ऐसा करने के लिए इससे अच्छा तरीका है? प्रदर्शन-वार, हाँ वहाँ है!

प्रदर्शन में सुधार कैसे किया जा सकता है?

styleप्रत्येक तत्व को सीधे संशोधित करने के बजाय, आप एक नए वर्ग को पूर्व-परिभाषितaddClass() कर सकते हैं और इसका उपयोग करके अपने मिलान किए गए तत्वों को जोड़ सकते हैं (एक और jQuery विधि)।

इस पहले से मौजूद JSPerf पर आधारित है , जिसकी तुलना css()में addClass(), हम देख सकते हैं कि addClass()वास्तव में बहुत तेज है:

हम खुद इसे कैसे लागू कर सकते हैं?

सबसे पहले हम अपनी नई CSS घोषणा में जोड़ सकते हैं:

.hidden {
    display: none;
}

आपका HTML एक ही रहेगा, यह पूर्व निर्धारित वर्ग बाद में उपयोग के लिए जगह में है।

हम अब addClass()इसके बजाय उपयोग करने के लिए जावास्क्रिप्ट को संशोधित कर सकते हैं :

$('.target').addClass('hidden');

इस कोड को चलाते समय, styleआपके प्रत्येक मिलान किए गए "लक्ष्य" तत्वों की संपत्ति को सीधे संशोधित करने के बजाय , यह नया वर्ग अब हो जाएगा:

<element class="target hidden"></element>

नए "छिपे हुए" वर्ग के साथ, यह तत्व आपके सीएसएस में घोषित स्टाइल का वारिस करेगा और आपका तत्व अब प्रदर्शित नहीं होगा।

Comments

अच्छी सलाह। .css()आईएमओ को टॉगल करने के बजाय उपयोग करने का एक अच्छा कारण है ।

— BoltClock

Answer 10

जैसा कि कई अन्य लोगों द्वारा उल्लेख किया गया है, हाँ, बिना किसी निर्दिष्ट सीएसएस के साथ कक्षाओं का उपयोग करना पूरी तरह से मान्य है और उन्हें 'सीएसएस कक्षाएं' के रूप में सोचने के बजाय आपको क्रमशः क्लास और आईडी के शब्दार्थों को समूहों और व्यक्तिगत तत्वों को पहचानना चाहिए।

मैं चाहता था कि मैं एक महत्वपूर्ण बिंदु उदाहरण के रूप में नहीं उठाया गया है में चिप करना चाहता था। यदि आपको कभी तत्वों की एक चर लंबाई में दृश्य हेरफेर करने की आवश्यकता होती है (इस मामले में आप टेबल पंक्तियों का उपयोग कर रहे हैं) तो यह हमेशा समझ में आता है कि जावास्क्रिप्ट के माध्यम से ऐसा करने की लागत संभवतः बहुत महंगी हो सकती है (जैसे यदि आपके पास है हज़ारों पंक्तियाँ)।

इस स्थिति में मान लें कि हम जानते हैं कि कॉलम 2 में हमेशा छिपे रहने की क्षमता होती है (यह आपकी तालिका का एक सचेत कार्य है) तो इस उपयोग के मामले को संभालने के लिए सीएसएस शैली को डिजाइन करना समझ में आता है।

table.target-hidden .target { display: none; }

तब DOM को एन तत्व खोजने के लिए जेएस का उपयोग करने के बजाय हमें केवल एक (हमारी तालिका) पर एक वर्ग को टॉगल करने की आवश्यकता है।

$("table").addClass("target-hidden")

तालिका को एक आईडी बताकर यह और भी तेज होगा और आप :nth-childचयनकर्ता का उपयोग करके कॉलम को भी संदर्भित कर सकते हैं जो आपके मार्कअप को और कम कर देगा लेकिन मैं दक्षता पर टिप्पणी नहीं कर सकता। ऐसा करने का एक और कारण यह है कि मैं इनलाइन स्टाइल से नफरत करता हूं, और इसे मिटाने के लिए बड़ी लंबाई तक जाऊंगा!

Comments

+1 "समूहों और व्यक्तिगत तत्वों" के लिए और दस्तावेज़ संरचना के कुशल उपयोग के लिए

— deltab

Answer 11

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

यह न केवल calsses के लिए मान्य है, बल्कि html तत्वों की आईडी विशेषता के लिए भी है।

Answer 12

तत्वों के लिए सिर्फ क्वेरी करने के लिए कक्षाओं का उपयोग करने में कोई समस्या नहीं है। मैं ऐसे वर्ग नामों को sys-उपसर्ग देता था (उदाहरण के लिए, मैं आपकी कक्षा का नाम लूंगा sys-target) उन्हें स्टाइल के लिए उपयोग की जाने वाली कक्षाओं से अलग करने के लिए। यह अतीत में कुछ Microsoft डेवलपर्स द्वारा उपयोग किया जाने वाला एक सम्मेलन था। मैं भी का उपयोग करने के बढ़ते अभ्यास पर ध्यान दियाjs- इस उद्देश्य के लिए उपसर्ग ।

यदि आप स्टाइल के अलावा अन्य उद्देश्यों के लिए कक्षाओं का उपयोग करने के साथ सहज नहीं हैं, तो मैं आपको सलाह देता हूं कि आप रोल.जैस jQuery प्लगइन का उपयोग करें जो आपको roleविशेषता का उपयोग करके एक ही उद्देश्य प्राप्त करने की अनुमति देता है , इसलिए, आप अपना मार्कअप लिख सकते हैं <td role="target">और इसका उपयोग करने के लिए क्वेरी कर सकते हैं $("@target")। परियोजना पृष्ठ में अच्छा विवरण और उदाहरण हैं। मैं इस प्लगइन का उपयोग बड़ी परियोजनाओं के लिए करता हूं क्योंकि मैं वास्तव में केवल स्टाइल के उद्देश्य के लिए कक्षाएं रखना पसंद करता हूं।

Answer 13

JQuery सत्यापन इंजन का संदर्भ लें । यहां तक ​​कि हम HTML विशेषताओं पर सत्यापन नियमों को जोड़ने के लिए गैर-मौजूद वर्गों का भी उपयोग करते हैं । इसलिए उन कक्षाओं का उपयोग करने में कुछ भी गलत नहीं है जो वास्तव में एक स्टाइलशीट में घोषित नहीं हैं।