CSS और BEM
यह लेख CSS और BEM को समझाता है।
YouTube Video
प्रीव्यू के लिए HTML
css-bem.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>BEM Example</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-bem.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS & BEM(Block Element Modifier)</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header>
19 <h2>BEM Example</h2>
20 </header>
21 <article>
22 <h3>BEM HTML Example</h3>
23 <section>
24 <header><h4>HTML</h4></header>
25<pre class="sample">
26<div class="button button--primary">
27 <span class="button__text">Click Me</span>
28</div>
29</pre>
30 </section>
31 </article>
32 <article>
33 <h3>BEM Example</h3>
34 <section>
35 <header><h4>HTML</h4></header>
36<pre class="sample">
37<header class="header">
38 <div class="header__logo">My Logo</div>
39 <nav class="header__nav">
40 <ul class="header__menu">
41 <li class="header__menu-item header__menu-item--active">Home</li>
42 <li class="header__menu-item">About</li>
43 <li class="header__menu-item">Contact</li>
44 </ul>
45 </nav>
46</header>
47</pre>
48 </section>
49 <header><h4>HTML+CSS</h4></header>
50 <section class="sample-view">
51 <header class="header">
52 <div class="header__logo">My Logo</div>
53 <nav class="header__nav">
54 <ul class="header__menu">
55 <li class="header__menu-item header__menu-item--active">Home</li>
56 <li class="header__menu-item">About</li>
57 <li class="header__menu-item">Contact</li>
58 </ul>
59 </nav>
60 </header>
61 </section>
62 </article>
63 <article>
64 <h3>BEM Example</h3>
65 <section>
66 <header><h4>HTML</h4></header>
67<pre class="sample">
68<header class="header">
69 <div class="header__logo">My Logo</div>
70 <nav class="header__nav">
71 <ul class="header__menu">
72 <li class="header__menu-item header__menu-item--active">Home</li>
73 <li class="header__menu-item">About</li>
74 <li class="header__menu-item">Contact</li>
75 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
76 </ul>
77 </nav>
78</header>
79</pre>
80 </section>
81 <header><h4>HTML+CSS</h4></header>
82 <section class="sample-view">
83 <header class="header">
84 <div class="header__logo">My Logo</div>
85 <nav class="header__nav">
86 <ul class="header__menu">
87 <li class="header__menu-item header__menu-item--active">Home</li>
88 <li class="header__menu-item">About</li>
89 <li class="header__menu-item">Contact</li>
90 <li class="header__menu-item header__menu-item--disabled">Disabled</li>
91 </ul>
92 </nav>
93 </header>
94 </section>
95 </article>
96 </main>
97</body>
98</html>CSS और BEM: प्रभावी शैली प्रबंधन के लिए दृष्टिकोण
CSS एक बुनियादी भाषा है जिसका उपयोग वेबसाइट की उपस्थिति को परिभाषित करने के लिए किया जाता है। हालांकि, CSS का प्रभावी ढंग से प्रबंधन करना कठिन हो सकता है, खासकर बड़े पैमाने की परियोजनाओं के लिए। BEM (ब्लॉक एलीमेंट मोडिफायर) एक CSS नामकरण प्रणाली है जिसे इन समस्याओं को हल करने और पुन: उपयोग और रखरखाव में सुधार के लिए डिज़ाइन किया गया है।
CSS में चुनौतियां और BEM की आवश्यकता
CSS में चुनौतियों में निम्नलिखित समस्याएं शामिल हैं:।
- ग्लोबल नेमस्पेस टकराव: CSS में, क्लास नाम ग्लोबल होते हैं, जो विभिन्न घटकों के बीच टकराव का खतरा पैदा करते हैं।
- जटिल सेलेक्टर्स का अत्यधिक उपयोग: अत्यधिक जटिल डीसेंडेंट या आईडी सेलेक्टर्स विशिष्टता बढ़ाते हैं, जिससे भविष्य में संशोधन कठिन हो जाते हैं।
- पुन: उपयोग क्षमता में कमी: विशिष्ट शैलियों को अन्य घटकों में पुन: उपयोग करना कठिन हो जाता है।
BEM को इन समस्याओं को हल करने के लिए डिज़ाइन किया गया था।
BEM की बुनियादी अवधारणाएं
BEM तीन मुख्य तत्वों से बना है:।
- ब्लॉक: एक स्वतंत्र घटक जिसका अपना अर्थ होता है।
- एलीमेंट: ब्लॉक का एक भाग, जो तार्किक रूप से उससे जुड़ा होता है।
- मोडिफायर: ब्लॉक या एलीमेंट की उपस्थिति या व्यवहार को बदलता है।
BEM नामकरण प्रथाएँ निम्न स्वरूप का पालन करती हैं:।
.block__element--modifierब्लॉक: ब्लॉक का घटक नाम।एलीमेंट: एक एलीमेंट जो ब्लॉक का भाग है।मोडिफायर: एक विशिष्ट स्थिति या शैली भिन्नता को दर्शाता है।
व्यावहारिक उदाहरण
नीचे एक साधारण उदाहरण दिया गया है।
1<div class="button button--primary">
2 <span class="button__text">Click Me</span>
3</div>buttonएक ब्लॉक है।button__textएक तत्व है।button--primaryएक संशोधक है।
BEM के फायदे
BEM के निम्नलिखित लाभ हैं।
- संगति क्योंकि नामकरण प्रणाली संगत है, कोड पढ़ना आसान हो जाता है।
- पुन: उपयोगिता कंपोनेंट्स को पुन: उपयोग करना आसान हो जाता है।
- रख-रखाव योग्यता अन्य डेवलपर्स को कोड समझना आसान होता है, जिससे बदलाव करना भी आसान हो जाता है।
BEM का उपयोग करके एक प्रोजेक्ट बनाना
HTML डिज़ाइन
यहाँ BEM लागू करने वाले HTML का एक उदाहरण है।
1<header class="header">
2 <div class="header__logo">My Logo</div>
3 <nav class="header__nav">
4 <ul class="header__menu">
5 <li class="header__menu-item header__menu-item--active">Home</li>
6 <li class="header__menu-item">About</li>
7 <li class="header__menu-item">Contact</li>
8 </ul>
9 </nav>
10</header>CSS डिज़ाइन
HTML के लिए निम्नलिखित उपयुक्त CSS लिखें।
1.header {
2 background-color: #333;
3 color: #fff;
4 padding: 10px;
5}
6
7.header__logo {
8 font-size: 24px;
9}
10
11.header__nav {
12 display: flex;
13 justify-content: space-around;
14}
15
16.header__menu {
17 list-style: none;
18 margin: 0;
19 padding: 0;
20 display: flex;
21}
22
23.header__menu-item {
24 margin: 0 10px;
25 padding: 5px 10px;
26}
27
28.header__menu-item--active {
29 font-weight: bold;
30 border-bottom: 2px solid #fff;
31}- यह CSS, पुन: उपयोग और रख-रखाव बढ़ाने के लिए BEM (ब्लॉक एलीमेंट मॉडिफायर) नियम का उपयोग कर मॉड्यूलर स्टाइल्स परिभाषित करती है।
शैलियों का विस्तार करना
आइए देखें कि किसी विशेष मेनू आइटम को निष्क्रिय बनाने के लिए नया मॉडिफायर कैसे जोड़ें।
उपयुक्त HTML इस प्रकार दिखेगा।
1<li class="header__menu-item header__menu-item--disabled">Disabled</li>1.header__menu-item--disabled {
2 opacity: 0.5;
3 pointer-events: none;
4}- यह CSS ऐसे मॉडिफायर को परिभाषित करती है जो निष्क्रिय मेनू आइटम्स को दृश्य रूप से कम रोशनी देता है और क्लिक इंटरैक्शन को अक्षम कर देता है।
अक्सर पूछे जाने वाले प्रश्न
BEM का उपयोग करते समय, निम्नलिखित बातों का ध्यान रखा जा सकता है।
प्र01: क्या मुझे BEM के नामकरण नियमों का सख्ती से पालन करना होगा?
BEM के नामकरण नियमों का सख्ती से पालन करना आवश्यक नहीं है, लेकिन संगति बनाए रखना महत्वपूर्ण है। प्रोजेक्ट के भीतर統統統統統統統統統統統統統統統統統統।
Q2: क्या BEM को पेश करने से CSS अधिक विस्तृत नहीं हो जाती?
BEM को लागू करने से CSS क्लास नाम लंबे हो सकते हैं, लेकिन इससे कंपोनेंट्स की भूमिकाएँ अधिक स्पष्ट हो जाती हैं। इससे रखरखाव में सुधार होता है, और लाभ अतिरिक्तता से अधिक होते हैं।
Q3: क्या BEM को अन्य CSS फ्रेमवर्क्स के साथ इस्तेमाल किया जा सकता है?
BEM को अन्य CSS फ्रेमवर्क्स के साथ भी उपयोग किया जा सकता है। उदाहरण के तौर पर, यहां तक कि जब आप टेलविंड CSS या बूटस्ट्रैप का उपयोग कर रहे हों, आप कस्टम कंपोनेंट्स पर BEM लागू कर सकते हैं।
निष्कर्ष
BEM मॉड्यूलराइज करने और CSS को प्रबंधित करना आसान बनाने के लिए स्पष्ट नामकरण प्रणाली प्रदान करता है। इस विधि का उपयोग करके, आप स्टाइल संघर्ष को रोक सकते हैं और रख-रखाव और पुन: उपयोगिता में काफी सुधार कर सकते हैं। उचित नामकरण प्रणाली डिज़ाइन करना प्रोजेक्ट की गुणवत्ता और उत्पादकता में सुधार लाता है।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।