ప్రాజెక్టులు పెరిగేటప్పుడు, సాధారణ 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 లేదు (శుద్ధీకరణ చేయబడింది), సుసంగత డిజైన్ టోకెన్లు. నష్టాలు: వర్బోస్ 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), యూటిలిటీలు (టేయిల్విండ్), లేదా స్కోపింగ్ (మాడ్యూల్లు) ద్వారా, అవి CSS ను ఊహించదగినది మరియు స్కేల్ను మార్చడానికి సురక్షితంగా ఉంచుతాయి.
పెద్ద CSS కోడ్బేస్లు క్రమశిక్షణ లేకుండా గ్లోబల్ స్కోప్ మరియు నిర్దిష్టత యుద్ధాల కింద కూలిపోతాయి.
పద్ధతిని (సాధారణంగా BEM, టేయిల్విండ్, లేదా ఈ రోజు స్కోప్డ్ CSS మాడ్యూల్లు) స్థిరంగా ఎంచుకోవడం మరియు వర్తించడం శైలులను మాడ్యూలర్గా, తొలగించదగినవిగా, మరియు టీమ్ మరియు కోడ్బేస్ వృద్ధి చెందేటప్పుడు సంఘర్ష-రహితంగా ఉంచుతుంది.