प्रकल्प वाढताच, सामान्य CSS जागतिक स्कोपला त्रस्त होते — प्रत्येक निवडक जागतिकरित्या स्पर्धा करते, विशिष्टता युद्धे भडकते, आणि कोणीही नियम हटवण्याचा धाकड करत नाही. पद्धती संरचना आणि नामकरण संमेलन लादून CSS राखण करण्यायोग्य ठेवते.
नामकरण संमेलन जो संबंध स्पष्ट करते आणि विशिष्टता सपाट ठेवते (सर्व एकल क्लास):
{ }
{ }
{ }
{ }
<div class="card card--featured">
<h2 class="card__title">...</h2>
</div>
BEM चे मूल्य: क्लास नावे स्वयं-दस्तावेज असतात, संमेलनाद्वारे स्कोप केलेली असतात, आणि एकसमान कमी विशिष्टता (नेस्टिंग/id युद्ध नाही).
मार्कअपमध्ये थेट लहान एकल-उद्देश्य क्लासांपासून शैली रचना करा:
<div class="flex items-center gap-4 p-6 rounded-lg shadow">...</div>
सुविधा: नामकरण नाही, अप्रयुक्त CSS नाही (शुद्ध), सुसंगत डिজाइन टोकन. नुकसान: verbose HTML. त्याची गती आणि सुसंगतताच्या कारणे अत्यंत लोकप्रिय.
घटक फ्रेमवर्कमधील आधुनिक दृष्टिकोन — शैलीचे घटकामध्ये स्कोप करा जेणेकरून ते लीक होऊ शकत नाहीत:
import styles from "./Card.module.css"; // class names are hashed/localized
<div className={styles.card}>...</div> // → .Card_card__a1b2 (unique)
हे संमेलनऐवजी यांत्रिकरित्या जागतिक-स्कोप समस्या सोडवते.
OOCSS — separate structure from skin, reuse objects
SMACSS — categorize rules (base, layout, module, state, theme)
ITCSS — layer CSS by specificity (generic → explicit), low to high
ते सर्व समान शत्रू विरुद्ध लढतात: विशिष्टता रेंगाळणे, नामकरण टकराव, मृत कोड, आणि अप्रत्याशित कॅस्केड. नामकरण (BEM), उपयोगिता (Tailwind), किंवा स्कोपिंग (मॉड्यूल) द्वारे, ते CSS पूर्वानुमेयक आणि स्केलवर बदलण्यास सुरक्षित ठेवते.
मोठ्या CSS कोडबेस शिस्तीशिवाय जागतिक स्कोप आणि विशिष्टता युद्धांतर्गत कोसळते.
एक पद्धती (सामान्यतः BEM, Tailwind, किंवा स्कोप केलेली CSS मॉड्यूल आज) निवडणे आणि सातत्याने लागू करणे हीच गोष्ट आहे जी शैलीला मॉड्यूलर, हटवण्यायोग्य, आणि संघ आणि कोडबेस वाढताच संघर्ष-मुक्त ठेवते.
सविस्तर उत्तरांसह IT मुलाखत प्रश्नांचे ग्रंथालय — Junior पासून Senior पर्यंत.
देणगी द्या