What is CSS-in-JS? | TechRepublic

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

सीएसएस-इन-जेएस ट्यूटोरियल।

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

Table of Contents

CSS-in-JS कैसे काम करता है?

जैसा कि नाम से पता चलता है, सीएसएस-इन-जेएस प्रोग्रामर्स को सीधे उनके जावास्क्रिप्ट या टाइपस्क्रिप्ट कोड में सीएसएस लिखकर अपने घटकों को स्टाइल करने की अनुमति देता है। बेशक, आप स्थिरांक को परिभाषित करके स्वयं ऐसा कर सकते हैं, जैसा कि नीचे दिए गए कोड उदाहरण में दिखाया गया है:

const styles = {
  background: "#FE0000",
  color: "#FFFFFF"
};

फिर आपको बस इसे तत्व तक भेजना है शैली विशेषता, इस तरह:

<div style={styles}>
 <!-- some content -->
</div>

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

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  width: 90px;
  height: 40px;
  background: ${props => props.active ? "black" : "darkgrey"};
  color: blue;
`;

const Button = () => (
  <StyledButton>
    My Styled Button
  </StyledButton>
);

export default Button;

ध्यान दें कि हम सशर्त मानों के आधार पर गतिशील रूप से मान निर्धारित कर सकते हैं रंगमंच की सामग्री.

देखना: $30 में शुरुआत से जावास्क्रिप्ट सीखें

फ्रेमवर्क-विशिष्ट बनाम फ्रेमवर्क-अज्ञेयवादी पुस्तकालय

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

कुछ लाइब्रेरी, जैसे रेडियम और जेएसएक्स, केवल एक विशिष्ट जावास्क्रिप्ट ढांचे के साथ काम करती हैं। उदाहरण के लिए, रेडियम रिएक्ट ऐप्स के लिए बनाया गया था, जबकि स्टाइल जेएसएक्स केवल जेएसएक्स में लिखे गए घटकों का समर्थन करता है (हालांकि इसका उपयोग रिएक्ट के साथ भी किया जा सकता है)।

आश्चर्य की बात नहीं है कि, फ्रेमवर्क-विशिष्ट सीएसएस-इन-जेएस लाइब्रेरीज़ उसी सिंटैक्स का उपयोग करती हैं जिस फ्रेमवर्क का वे समर्थन करते हैं। उदाहरण के लिए, स्टाइल जेएसएक्स घटकों में सीएसएस शैलियों को जोड़ने के लिए जेएसएक्स सिंटैक्स के भीतर टेम्पलेट शाब्दिक का उपयोग करता है। यहां स्टाइल JSX कोड का एक उदाहरण दिया गया है जो डायनामिक स्टाइल वाला एक बटन बनाता है:

const Button = props => (
  <button>
    {props.children}
    <style jsx>{`
      button {
        padding: ${'large' in props ? '40' : '22'}px;
        background: ${props.theme.background};
        color: #555;
        display: block;
        font-size: .5em;
      }
    `}</style>
  </button>
)

अन्य सीएसएस-इन-जेएस लाइब्रेरी जैसे जेएसएस, इमोशन और स्टाइल्ड कंपोनेंट्स फ्रेमवर्क-अज्ञेयवादी हैं, जिसका अर्थ है कि आप उन्हें किसी भी घटक-आधारित फ्रेमवर्क या यहां तक कि सादे जावास्क्रिप्ट के साथ उपयोग कर सकते हैं। अन्य लाइब्रेरी जैसे एफ़्रोडाइट वेब घटकों के साथ भी काम करती हैं।

यहां एक वेब घटक का उदाहरण दिया गया है जो पृष्ठभूमि रंग सेट करने के लिए एफ़्रोडाइट का उपयोग करता है:

/* Registers a Web Component with blue background */
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
    blue: {
        backgroundColor: 'blue'
    }
});

class App extends HTMLElement {
    attachedCallback() {
        this.innerHTML = `
<div class="${css(styles.red)}">
This is red.
</div>
`;
    }
}

document.registerElement('my-app', App);

देखना: बिटबकेट समीक्षा

सीएसएस-इन-जेएस के लाभ

आप जो भी लाइब्रेरी चुनें, सभी में निम्नलिखित विशेषताएं शामिल हैं:

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

CSS-in-JS के नुकसान

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

रनटाइम ओवरहेड: जैसे ही घटक प्रस्तुत होते हैं, सीएसएस-इन-जेएस लाइब्रेरी को दस्तावेज़ में डालने के लिए शैलियों को सादे सीएसएस में परिवर्तित करना होगा। इस बात पर कुछ बहस चल रही है कि क्या इसका अनुप्रयोग प्रदर्शन पर उल्लेखनीय प्रभाव पड़ सकता है या नहीं। यह संभवतः कोड जटिलता से लेकर हार्डवेयर तक कई कारकों पर निर्भर करेगा।
बड़ा बंडल आकार: आपके एप्लिकेशन का उपयोग करने वाले प्रत्येक उपयोगकर्ता को सीएसएस-इन-जेएस लाइब्रेरी के लिए जावास्क्रिप्ट डाउनलोड करना होगा। इमोशन 7.9 केबी मिनिज़िप्ड है और स्टाइल-कंपोनेंट 12.7 केबी है। तुलना के लिए रिएक्ट + रिएक्ट-डोम 44.5 केबी है, इसलिए सीएसएस-इन-जेएस लाइब्रेरी शायद ऊंट की कमर तोड़ने वाला तिनका नहीं होगी।

सीएसएस-इन-जेएस पर अंतिम विचार

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