SASS और BEM

यह लेख SASS और BEM को समझाता है।

हम SASS और BEM का उपयोग करके, ठोस उदाहरणों के साथ, उन अवधारणाओं और कार्यान्वयन विधियों की व्याख्या करेंगे जो बड़े पैमाने पर CSS में होने वाली उलझन और कमजोरी को रोकने में मदद करती हैं।

YouTube Video

SASS और BEM

जैसे-जैसे फाइलों और स्क्रीन की संख्या बढ़ती है, CSS में अक्सर ऐसी समस्याएँ आती हैं जैसे 'मुझे नहीं पता यह स्टाइल कहाँ परिभाषित है' और 'बस एक छोटा सा बदलाव किसी दूसरी स्क्रीन की उपस्थिति को बिगाड़ देता है।'।

ऐसा इसलिए है क्योंकि CSS मूल रूप से एक ऐसी भाषा है जो डिज़ाइन नियमों को लागू नहीं करती। अगर आप ऐसे ही लिखते रहेंगे, तो अनजाने में निर्भरताएँ बढ़ जाएँगी।

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

कारण कि क्यों CSS आसानी से अनियंत्रणीय हो जाती है

नीचे जैसा CSS, बाद में कोड देखने पर समझना मुश्किल हो सकता है कि यह कैसे व्यवहार करता है।

 1.title {
 2  font-size: 16px;
 3  color: #333;
 4}
 5
 6.container .title {
 7  font-size: 18px;
 8}
 9
10.sidebar .container .title {
11  color: red;
12}

• इस उदाहरण में, एक ही .title क्लास जगह के अनुसार अलग दिखाई देती है, इसलिए आप तुरंत नहीं जान सकते कि इस .title पर कौन सा स्टाइल लागू होगा।
• इस तरह, जैसे-जैसे चयनकर्ता गहरे और पेरेंट एलिमेंट्स पर अधिक निर्भर होते हैं, CSS में प्रभाव के दायरे की भविष्यवाणी करना कठिन हो जाता है और परिवर्तन करते समय यह टूटने की संभावना बढ़ जाती है।

BEM एक नामकरण प्रणाली है जो 'नामों के माध्यम से भूमिकाएँ व्यक्त करती है'

BEM का अर्थ है Block / Element / Modifier, और इसमें नाम में ही यह सम्मिलित होता है कि क्लास कौन से कंपोनेंट का प्रतिनिधित्व करती है और उसकी अवस्था क्या है।

• Block एक स्वतंत्र कंपोनेंट है।
• Element ब्लॉक का आंतरिक तत्व होता है।
• Modifier एक स्थिति या रूपांतर का प्रतिनिधित्व करता है।

1.card {}
2.card__title {}
3.card--highlighted {}

इस नामकरण प्रणाली से, आप सिर्फ HTML देखकर ही संरचना और भूमिका का अनुमान लगा सकते हैं।

BEM का उपयोग करके HTML का मूल स्वरूप

यहाँ HTML में BEM के साथ दर्शाया गया एक कार्ड UI का उदाहरण है।

1<div class="card card--highlighted">
2  <h2 class="card__title">Title</h2>
3  <p class="card__text">Description</p>
4</div>

सिर्फ क्लास नाम देखकर ही समझ आता है कि यह 'card कंपोनेंट', उसके अंदर 'title' और 'emphasized स्थिति' है। यही BEM का सबसे बड़ा लाभ है।

हालांकि, केवल BEM का उपयोग करने से CSS बोझिल हो सकती है।

अगर आप CSS में BEM को वैसे ही लिखते हैं, तो कोड की मात्रा बढ़ने लगती है।

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

यहाँ, SASS का उपयोग करके, आप संरचना बनाए रखने वाला संगठित कोड लिख सकते हैं।

SASS नेस्टिंग के साथ BEM को स्वाभाविक रूप से व्यक्त करें

SASS नेस्टिंग का उपयोग करके आप BEM की संरचना को सीधे अपने कोड में दर्शा सकते हैं।

 1.card {
 2  padding: 16px;
 3
 4  &__title {
 5    font-size: 18px;
 6  }
 7
 8  &__text {
 9    font-size: 14px;
10  }
11
12  &--highlighted {
13    border: 2px solid orange;
14  }
15}

& पैरेंट सेलेक्टर को संदर्भित करता है और यह BEM नामकरण के साथ बहुत अच्छी तरह काम करता है।

इस SASS से जनरेट हुई CSS

ऊपर दिया गया SASS निम्नलिखित जैसी CSS में संकलित होता है।

 1.card {
 2  padding: 16px;
 3}
 4
 5.card__title {
 6  font-size: 18px;
 7}
 8
 9.card__text {
10  font-size: 14px;
11}
12
13.card--highlighted {
14  border: 2px solid orange;
15}

हालांकि उपस्थिति समान है, लेकिन डेवलपर के लिए ज्ञानात्मक बोझ काफी कम हो जाता है।

Modifiers के सुरक्षित उपयोग के लिए डिज़ाइन करना

चूंकि BEM में Modifiers 'अवस्थाएँ' दर्शाते हैं, इसलिए मुख्य बात यह है कि उन्हें केवल ओवरराइड के लिए सीमित रखा जाए।

 1.button {
 2  padding: 8px 12px;
 3  background: #eee;
 4
 5  &--primary {
 6    background: blue;
 7    color: white;
 8  }
 9
10  &--disabled {
11    opacity: 0.5;
12    pointer-events: none;
13  }
14}

डिज़ाइन अधिक स्थिर रहता है यदि Modifiers को 'जोड़' के रूप में नहीं बल्कि 'बदलाव' के रूप में माना जाए।

Element नेस्टिंग को एक स्तर तक सीमित रखें

BEM में, एलिमेंट्स को बहुत गहराई से नेस्ट करना उचित नहीं है।

1.card {
2  &__header {
3    font-weight: bold;
4  }
5
6  &__body {
7    margin-top: 8px;
8  }
9}

बहुस्तरीय एलिमेंट्स जैसे .card__header__title यह संकेत हैं कि आपको Block में विभाजन पर विचार करना चाहिए।

SASS फाइल संरचना का एक उदाहरण

अंत में, यहाँ एक SASS संरचना का उदाहरण है जो वास्तविक परियोजनाओं के लिए व्यावहारिक है।

1styles/
2├── base/
3│   └── reset.scss
4├── components/
5│   ├── card.scss
6│   └── button.scss
7├── layout/
8│   └── header.scss
9└── main.scss

अगर आप प्रत्येक कंपोनेंट को 1 ब्लॉक = 1 फाइल के रूप में प्रबंधित करते हैं, तो इसके टूटने की संभावना कम होती है।

card.scss का उदाहरण

 1.card {
 2  padding: 16px;
 3  border: 1px solid #ccc;
 4
 5  &__title {
 6    font-size: 18px;
 7  }
 8
 9  &__text {
10    color: #666;
11  }
12}

क्योंकि सब कुछ इस यूनिट में आत्मनिर्भर है, हटाना, स्थानांतरण करना और पुनः उपयोग करना आसान हो जाता है।

सारांश

SASS और BEM केवल फैशनेबल तकनीकें नहीं हैं—वे CSS को डिज़ाइन करने योग्य कोड में बदलने के व्यावहारिक तरीके हैं।

• BEM अर्थ और भूमिका को नाम देता है।
• SASS संरचना बनाए रखते हुए आसान लेखन की सुविधा देता है।
• दोनों को संयोजित करने से CSS के टूटने की संभावना कम हो जाती है।

आइए आज CSS को इस तरह लिखें कि आपका भविष्य का स्वयं भी उसे आसानी से समझ सके।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video