BEM और यूटिलिटी-फ़र्स्ट दृष्टिकोण, एक टीम में उनके वास्तविक ट्रेड-ऑफ़ की तुलना करें, और कैस्केड लेयरों के साथ अपनी फ़ाइलों को संरचित करें।
इस पाठ को Kodokon में खोलेंCSS किसी कंपोनेंट के पैमाने पर नहीं टूटता, यह किसी प्रोजेक्ट के पैमाने पर टूटता है: किसी मौजूदा नियम के खिलाफ़ बस "जीतने" के लिए विशिष्टता का बढ़ना, ऐसे कोड को हटाने का डर जिसकी पहुँच आप नहीं जानते, एक स्क्रीन से दूसरी स्क्रीन में स्टाइलों का रिसना। एक CSS आर्किटेक्चर सबसे बढ़कर विशिष्टता और स्कोप को प्रबंधित करने की एक रणनीति है। दो प्रमुख विचारधाराएँ, BEM और यूटिलिटी-फ़र्स्ट, विपरीत रास्तों से एक ही समस्या का उत्तर देती हैं।
BEM (Block, Element, Modifier) हर स्टाइल किए गए नोड को नाम देता है: .card (एक स्वतंत्र ब्लॉक), .card__title (ब्लॉक से संबंधित एक एलिमेंट), .card--featured (ब्लॉक का एक वेरिएंट)। यह परंपरा सपाट विशिष्टता की गारंटी देती है - हर जगह एक ही क्लास, कभी कोई वंशज सेलेक्टर नहीं - इसलिए कोई क्रम संघर्ष नहीं, और एक नाम जो स्वामित्व को प्रलेखित करता है। इसकी कीमत: लगातार नाम गढ़ना, और मानों का वास्तविक दोहराव (वही margin-top: 16px बीस ब्लॉकों में फिर से लिखा गया)।
.card {
padding: 16px;
border-radius: 8px;
}
.card__title {
font-size: 1.25rem;
}
.card__title--muted {
color: #6b7280;
}
.card--featured {
border: 2px solid var(--brand);
}यूटिलिटी-फ़र्स्ट दृष्टिकोण (Tailwind इसका प्रमुख अवतार होने के नाते) तर्क को पलट देता है: अब कोई नाम नहीं, बस एकल-ज़िम्मेदारी वाली परमाणु क्लासें जो HTML में संयोजित होती हैं। लाभ मापने योग्य हैं: शून्य नामकरण प्रयास, मार्कअप के साथ सह-स्थित स्टाइलें (कंपोनेंट को हटाने से उसकी स्टाइलें हट जाती हैं), और एक अंतिम CSS बंडल जो आकार में लगभग स्थिर रहता है क्योंकि यूटिलिटीज़ साझा होती हैं। ट्रेड-ऑफ़ भी हैं: वाचाल HTML, दोहराव मार्कअप की ओर स्थानांतरित हो जाता है जिसके लिए DRY बने रहने हेतु एक कंपोनेंट लेयर (React, Vue, पार्शियल्स) की आवश्यकता होती है, और शब्दावली के लिए एक सीखने की अवस्था।
<article class="flex flex-col gap-4 rounded-lg
border border-gray-200 p-4 shadow-sm">
<h2 class="text-lg font-semibold">Invoice</h2>
<p class="text-sm text-gray-600">
Paid on March 12
</p>
</article>ये दृष्टिकोण परस्पर अनन्य नहीं हैं: कई परिपक्व टीमें इन्हें जोड़ती हैं - लेआउट और स्पेसिंग के लिए यूटिलिटीज़, जटिल पैटर्न और स्थितियों के लिए कंपोनेंट क्लासें (BEM या CSS Modules)। जहाँ तक फ़ाइल संगठन की बात है, ITCSS सिद्धांत संदर्भ बना रहता है: सामान्य से विशिष्ट की ओर क्रम (रीसेट, आधार एलिमेंट, कंपोनेंट, यूटिलिटीज़)। नेटिव @layer नियम इस परंपरा को इंजन-स्तर की गारंटी में बदल देता है: लेयरों के बीच प्राथमिकता उनमें मौजूद सेलेक्टरों की विशिष्टता से स्वतंत्र होती है।
@layer reset, base, components, utilities;
@layer base {
h2 { font-size: 1.5rem; }
}
@layer components {
#hero .btn { padding: 12px 24px; }
}
@layer utilities {
.p-0 { padding: 0; }
}.card__title--muted में, --muted खंड क्या दर्शाता है?card__title एलिमेंट का एक वेरिएंटcard__title का एक चाइल्ड एलिमेंट@layer का मुख्य योगदान क्या है?