js में इनलाइन शैली लिखना,

const styles = {
    background: 'blue',
    color: 'white'
}

और इसे नीचे के रूप में JSX में उपयोग कर रहे हैं

<div style={styles}> I am a div </div>

'शैली वाले घटकों' का उपयोग करके शैलियों को लिखना,

const Div= styled.div`
     background: 'blue',
     color: 'white'
`

और इसका उपयोग करना पसंद है,

<Div> I am a Div </Div>

यहाँ css-in-js लाइब्रेरी का उपयोग करने और इनलाइन शैलियों का उपयोग करने में क्या अंतर है।

1
Tinu Jos K 9 मार्च 2020, 10:53
यह एक गलत तुलना है, आपको CSS-in-JS बनाम सामान्य CSS की तुलना करने की आवश्यकता है
 – 
Dennis Vash
9 मार्च 2020, 11:08
यह गलत तुलना कैसे हो सकती है जब दोनों तरीके एक ही काम कर रहे हों। कृपया समझाएँ। क्या कोई अतिरिक्त चीज है जो एक सीएसएस-इन-जेएस लाइब्रेरी उन्हें इनलाइन के रूप में लिखने की तुलना में कर सकती है (जो मुझे लगता है कि फिर से जेएस तरीके से एक सीएसएस है) :)
 – 
Tinu Jos K
9 मार्च 2020, 11:11

1 उत्तर

सबसे बढ़िया उत्तर

सबसे पहले, आपका styled.div उदाहरण गलत है, जैसा कि CSS-in-JS में आप वास्तविक CSS लिखते हैं, ऑब्जेक्ट जैसी शैली नहीं:

// "Real CSS"
const Div= styled.div`
  background: blue;
  color: white;
`

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

सीएसएस कक्षाएं आमतौर पर इनलाइन शैलियों की तुलना में प्रदर्शन के लिए बेहतर होती हैं।

तो निष्कर्ष में:

  1. इनलाइन शैलियों में, आप ऑब्जेक्ट-जैसी शैली बनाम वास्तविक सीएसएस लिखते हैं
  2. CSS लिखना CSS के सभी लाभों की अनुमति देता है (जैसे चयनकर्ता)।
  3. इनलाइन शैलियों की तुलना में CSS का पुन: उपयोग और रखरखाव बहुत आसान है।
  4. असली बहस सीएसएस-इन-जेएस बनाम सीएसएस मॉड्यूल बनाम एसएएसएस बनाम सामान्य सीएसएस के बीच है (इसके लिए आप गूगल कर सकते हैं या SO में संबंधित प्रश्न पढ़ सकते हैं)।
  5. इनलाइन शैलियों को खराब अभ्यास माना जाता है क्योंकि इसके अतिरिक्त वे सभी परिभाषित शैलियों को ओवरराइड करते हैं।
  6. इनलाइन-शैलियां उनकी कार्यक्षमता में सीमित हैं (इनलाइन शैली में कुछ एनिमेट करने या मीडिया क्वेरी को लागू करने का प्रयास करें)।
2
Dennis Vash 9 मार्च 2020, 11:25
मैं सीएसएस कक्षाओं (बाहरी शैलियों), इनलाइन शैलियों और शैलियों टैग (आंतरिक शैलियों) से अवगत हूं, बस किसी ऑब्जेक्ट में सीधे शैली लिखने और स्टाइल प्रोप बनाम सीएसएस-इन-जेएस लाइब्रेरी का उपयोग करने के बारे में जानने के लिए उत्सुक हूं।
 – 
Tinu Jos K
9 मार्च 2020, 11:15
आपकी बात के बारे में 4) सीएसएस मॉड्यूल/एसएएसएस और सामान्य सीएसएस संबंधित हैं। वे सभी बाहरी सीएसएस करने में मदद करते हैं। हो सकता है मुझे पूछना चाहिए था "इनलाइन शैलियों की तुलना में एक सीएसएस-इन-जेएस लाइब्रेरी कौन सी अतिरिक्त सुविधाएं प्रदान करती है (यहां हम केवल जावास्क्रिप्ट में शैलियों को लिखने के बारे में चिंतित हैं)। क्या मैं अभी भी गलत हूं? @ डेनिस
 – 
Tinu Jos K
9 मार्च 2020, 11:26
लेकिन आपके उत्तर के लिए धन्यवाद, लेकिन आशा है कि आप समझ गए होंगे कि मैं क्या समझने की कोशिश कर रहा हूं।
 – 
Tinu Jos K
9 मार्च 2020, 11:27
आपका प्रश्न होना चाहिए: इनलाइन शैलियों की सीमाएं क्या हैं, इसका JS में CSS से कोई लेना-देना नहीं है
 – 
Dennis Vash
9 मार्च 2020, 11:27
1
हालाँकि वे दोनों JS के साथ लागू हुए, उनकी कार्यक्षमता अलग है और उन्होंने React में अलग तरह से व्यवहार किया। चूंकि CSS-in-JS क्लासनाम उत्पन्न करता है और इनलाइन-शैलियाँ HTML तत्वों की केवल इनलाइन स्टाइलिंग हैं।
 – 
Dennis Vash
9 मार्च 2020, 11:47