ప్రాథమిక CSS సూత్రాలను నేర్చుకునేటప్పుడు, నిర్వహణ సామర్థ్యాన్ని నిర్ధారించడానికి మాడ్యులర్, పునర్వినియోగం మరియు వివరణాత్మక శైలులను వ్రాయడం బోధించబడుతుంది. కానీ డెవలపర్లు వాస్తవ-ప్రపంచ అనువర్తనాలతో నిమగ్నమైనప్పుడు, స్టైల్లు అనాలోచిత ప్రాంతాల్లోకి రాకుండా UI ఫీచర్లను జోడించడం అసాధ్యం అనిపిస్తుంది. ఈ సమస్య తరచుగా స్నో బాల్స్ స్వీయ-సంతృప్త లూప్గా మారుతుంది; ఒక మూలకం లేదా తరగతికి సైద్ధాంతికంగా స్కోప్ చేయబడిన శైలులు అవి చెందని చోట కనిపించడం ప్రారంభిస్తాయి. ఇది లీక్ అయిన స్టైల్లను భర్తీ చేయడానికి డెవలపర్ని మరింత నిర్దిష్టమైన సెలెక్టర్లను సృష్టించడానికి బలవంతం చేస్తుంది, ఇది అనుకోకుండా గ్లోబల్ స్టైల్లను భర్తీ చేస్తుంది మరియు మొదలైనవి. BEM వంటి దృఢమైన తరగతి పేరు సంప్రదాయాలు ఈ సమస్యకు ఒక సైద్ధాంతిక పరిష్కారం. BEM (బ్లాక్, ఎలిమెంట్, మాడిఫైయర్) మెథడాలజీ అనేది CSS ఫైల్లలో పునర్వినియోగం మరియు నిర్మాణాన్ని నిర్ధారించడానికి CSS తరగతులకు పేరు పెట్టే క్రమబద్ధమైన మార్గం. మూలకాలు మరియు వాటి స్థితిని వివరించడానికి డొమైన్ భాషని ఉపయోగించుకోవడం ద్వారా ఈ విధమైన సంప్రదాయాలకు పేరు పెట్టడం ద్వారా అభిజ్ఞా భారాన్ని తగ్గించవచ్చు మరియు సరిగ్గా అమలు చేస్తే, పెద్ద అప్లికేషన్ల కోసం శైలులను సులభంగా నిర్వహించవచ్చు. వాస్తవ ప్రపంచంలో, అయితే, ఇది ఎల్లప్పుడూ అలా పని చేయదు. ప్రాధాన్యతలు మారవచ్చు మరియు మార్పుతో, అమలు అస్థిరంగా మారుతుంది. HTML నిర్మాణంలో చిన్న మార్పులకు అనేక CSS తరగతి పేరు పునర్విమర్శలు అవసరం కావచ్చు. అత్యంత ఇంటరాక్టివ్ ఫ్రంట్-ఎండ్ అప్లికేషన్లతో, BEM ప్యాటర్న్ని అనుసరించే క్లాస్ పేర్లు చాలా పొడవుగా మరియు అసమంజసంగా మారవచ్చు (ఉదా., యాప్-యూజర్-ఓవర్వ్యూ__స్టేటస్--ప్రామాణికత), మరియు పేరు పెట్టే నియమాలకు పూర్తిగా కట్టుబడి ఉండకపోవడం సిస్టమ్ నిర్మాణాన్ని విచ్ఛిన్నం చేస్తుంది, తద్వారా దాని ప్రయోజనాలను నిరాకరిస్తుంది. ఈ సవాళ్లను బట్టి, డెవలపర్లు ఫ్రేమ్వర్క్ల వైపు మొగ్గు చూపడంలో ఆశ్చర్యం లేదు, Tailwind అత్యంత ప్రజాదరణ పొందిన CSS ఫ్రేమ్వర్క్. స్టైల్ల మధ్య గెలవలేని నిర్దిష్టత యుద్ధం వంటి వాటితో పోరాడటానికి ప్రయత్నించే బదులు, CSS క్యాస్కేడ్ను వదులుకోవడం మరియు పూర్తి ఐసోలేషన్కు హామీ ఇచ్చే సాధనాలను ఉపయోగించడం సులభం. డెవలపర్లు యుటిలిటీస్పై ఎక్కువ మొగ్గు చూపుతారు కొంతమంది డెవలపర్లు క్యాస్కేడ్ స్టైల్లను నివారించడంలో ఆసక్తి చూపుతున్నారని మనకు ఎలా తెలుసు? ఇది "ఆధునిక" ఫ్రంట్-ఎండ్ టూలింగ్ యొక్క పెరుగుదల - CSS-in-JS ఫ్రేమ్వర్క్ల వంటిది - ఆ ప్రయోజనం కోసం ప్రత్యేకంగా రూపొందించబడింది. నిర్దిష్ట భాగాలకు కఠినంగా స్కోప్ చేయబడిన వివిక్త శైలులతో పని చేయడం స్వచ్ఛమైన గాలిని పీల్చినట్లు అనిపించవచ్చు. ఇది విషయాలకు పేరు పెట్టవలసిన అవసరాన్ని తొలగిస్తుంది — ఇప్పటికీ అత్యంత అసహ్యించుకునే మరియు ఎక్కువ సమయం తీసుకునే ఫ్రంట్-ఎండ్ టాస్క్లలో ఒకటి — మరియు డెవలపర్లు CSS వారసత్వ ప్రయోజనాలను పూర్తిగా అర్థం చేసుకోకుండా లేదా ప్రయోజనం లేకుండా ఉత్పాదకంగా ఉండటానికి అనుమతిస్తుంది. కానీ CSS క్యాస్కేడ్ను తొలగించడం దాని స్వంత సమస్యలతో వస్తుంది. ఉదాహరణకు, జావాస్క్రిప్ట్లో స్టైల్లను కంపోజ్ చేయడానికి భారీ బిల్డ్ కాన్ఫిగరేషన్లు అవసరం మరియు తరచుగా కాంపోనెంట్ మార్కప్ లేదా HTMLతో స్టైల్స్ వికృతంగా మిళితం అవుతాయి. పేరు పెట్టే సంప్రదాయాలకు బదులుగా, మేము సెలెక్టర్లు మరియు ఐడెంటిఫైయర్లను స్వయంచాలకంగా రూపొందించడానికి బిల్డ్ టూల్స్ను అనుమతిస్తాము (ఉదా., .jsx-3130221066), డెవలపర్లు తమలో తాము మరొక నకిలీ-భాషను కొనసాగించడం అవసరం. (మీ కాంపోనెంట్ల యూజ్ఎఫెక్ట్లన్నింటిని అర్థం చేసుకోవడంలో జ్ఞానపరమైన భారం ఇప్పటికే తగినంతగా లేనట్లే!) డెవలపర్ టూల్స్ వంటి లైవ్ డీబగ్గింగ్కు మద్దతు ఇచ్చే స్థానిక బ్రౌజర్ ఫీచర్లను ఉపయోగించకుండా, డెవలప్మెంట్ కోసం కంపైల్ చేయబడిన నిర్దిష్ట అప్లికేషన్ వెర్షన్లకు ప్రాథమిక డీబగ్గింగ్ తరచుగా పరిమితం చేయబడుతుందని అర్థం. వెబ్ ఇప్పటికే అందించే వాటిని సంగ్రహించడానికి మేము ఉపయోగిస్తున్న సాధనాలను డీబగ్ చేయడానికి దాదాపుగా టూల్స్ను డెవలప్ చేయాల్సిన అవసరం ఉంది - అన్నీ ప్రామాణిక CSSని వ్రాయడం వల్ల కలిగే "నొప్పి" నుండి తప్పించుకోవడం కోసం. అదృష్టవశాత్తూ, ఆధునిక CSS ఫీచర్లు ప్రామాణిక CSSని వ్రాయడాన్ని మరింత సరళీకృతం చేయడమే కాకుండా క్యాస్కేడ్ను నిర్వహించడానికి మరియు మా కోసం పని చేసేలా చేయడానికి మా లాంటి డెవలపర్లకు మరింత ఎక్కువ శక్తిని అందిస్తాయి. CSS క్యాస్కేడ్ లేయర్లు ఒక గొప్ప ఉదాహరణ, కానీ ఆశ్చర్యకరమైన శ్రద్ధ లేకపోవడాన్ని పొందే మరొక లక్షణం ఉంది - అయితే ఇది ఇటీవల బేస్లైన్ అనుకూలమైనదిగా మారినందున ఇప్పుడు మారుతోంది. CSS @స్కోప్ ఎట్-రూల్ మేము కవర్ చేసిన స్టైల్-లీక్-ప్రేరిత ఆందోళనకు CSS @scope at-rule సంభావ్య నివారణగా నేను భావిస్తున్నాను, ఇది అబ్స్ట్రాక్షన్లు మరియు అదనపు బిల్డ్ టూలింగ్ కోసం స్థానిక వెబ్ ప్రయోజనాలను రాజీ చేయడానికి మమ్మల్ని బలవంతం చేయదు. "@స్కోప్ CSS ఎట్-రూల్ నిర్దిష్ట DOM సబ్ట్రీలలోని ఎలిమెంట్లను ఎంచుకోవడానికి మిమ్మల్ని అనుమతిస్తుంది, ఓవర్రైడ్ చేయడం కష్టంగా ఉండే అధిక-నిర్దిష్ట సెలెక్టర్లను రాయకుండా మరియు మీ సెలెక్టర్లను DOM నిర్మాణంతో చాలా కఠినంగా కలపకుండా ఎలిమెంట్లను ఖచ్చితంగా లక్ష్యంగా చేసుకుంటుంది."- MDN
మరో మాటలో చెప్పాలంటే, వారసత్వం, క్యాస్కేడింగ్ లేదా ఆందోళనల ప్రాథమిక విభజనను కూడా త్యాగం చేయకుండా మేము నిర్దిష్ట సందర్భాలలో వివిక్త శైలులతో పని చేయవచ్చు.ఫ్రంట్-ఎండ్ డెవలప్మెంట్ యొక్క దీర్ఘకాల మార్గదర్శక సూత్రం. అదనంగా, ఇది అద్భుతమైన బ్రౌజర్ కవరేజీని కలిగి ఉంది. వాస్తవానికి, Firefox 146 డిసెంబరులో @scopeకి మద్దతును జోడించింది, ఇది మొదటిసారిగా బేస్లైన్కు అనుకూలంగా మారింది. ఇక్కడ BEM నమూనా మరియు @స్కోప్ నియమాన్ని ఉపయోగించే బటన్ మధ్య సాధారణ పోలిక ఉంది:
<శైలి> .బటన్ .button__text { /* బటన్ వచన శైలులు */} .బటన్ .button__icon { /* బటన్ ఐకాన్ శైలులు */} .బటన్--ప్రాధమిక {ప్రాధమిక బటన్ శైలులు */}
<శైలి> @స్కోప్ (.primary-button) { span:first-child { /* బటన్ టెక్స్ట్ శైలులు */} span:last-child { /* బటన్ ఐకాన్ స్టైల్స్ */} }
@స్కోప్ నియమం తక్కువ సంక్లిష్టతతో ఖచ్చితత్వాన్ని అనుమతిస్తుంది. డెవలపర్ ఇకపై తరగతి పేర్లను ఉపయోగించి సరిహద్దులను సృష్టించాల్సిన అవసరం లేదు, ఇది స్థానిక HTML మూలకాల ఆధారంగా సెలెక్టర్లను వ్రాయడానికి వారిని అనుమతిస్తుంది, తద్వారా నిర్దేశిత CSS తరగతి పేరు నమూనాల అవసరాన్ని తొలగిస్తుంది. తరగతి పేరు నిర్వహణ అవసరాన్ని తీసివేయడం ద్వారా, @ స్కోప్ పెద్ద ప్రాజెక్ట్లలో CSSతో అనుబంధించబడిన భయాన్ని తగ్గించగలదు.
ప్రాథమిక వినియోగం
ప్రారంభించడానికి, మీ CSSకి @స్కోప్ నియమాన్ని జోడించి, స్టైల్స్ స్కోప్ చేయబడే రూట్ సెలెక్టర్ను చొప్పించండి:
@స్కోప్ (
కాబట్టి, ఉదాహరణకు, మనం
@స్కోప్ (నవ) { nav పరిధిలో ఒక { /* లింక్ స్టైల్స్ */}
a:active { /* Active link styles */}
a:active::ముందు { /* అదనపు స్టైలింగ్ కోసం సూడో-ఎలిమెంట్తో సక్రియ లింక్ */}
@media (గరిష్ట వెడల్పు: 768px) { ఒక { /* ప్రతిస్పందించే సర్దుబాట్లు */} } }
ఈ, దాని స్వంత, ఒక అద్భుతమైన లక్షణం కాదు. అయితే, స్కోప్ యొక్క ప్రారంభ మరియు ముగింపు పాయింట్లను సమర్థవంతంగా నిర్వచిస్తూ, దిగువ సరిహద్దును సృష్టించడానికి స్కోప్కు రెండవ వాదనను జోడించవచ్చు.
/* ఉల్ లోపల ఏదైనా మూలకం వర్తించే శైలులను కలిగి ఉండదు */ @స్కోప్ (nav) నుండి (ul) { ఒక { ఫాంట్ పరిమాణం: 14px; } }
ఈ అభ్యాసాన్ని డోనట్ స్కోపింగ్ అని పిలుస్తారు మరియు DOM నిర్మాణంతో గట్టిగా జతచేయబడిన సారూప్యమైన, అత్యంత నిర్దిష్టమైన సెలెక్టర్ల శ్రేణి, : సూడో-సెలెక్టర్ కాదు లేదా విభిన్న CSSని నిర్వహించడానికి
తీర్మానం టైల్విండ్ వంటి యుటిలిటీ-మొదటి CSS ఫ్రేమ్వర్క్లు ప్రోటోటైపింగ్ మరియు చిన్న ప్రాజెక్ట్లకు బాగా పని చేస్తాయి. అయితే, రెండు కంటే ఎక్కువ మంది డెవలపర్లను కలిగి ఉన్న పెద్ద ప్రాజెక్ట్లలో ఉపయోగించినప్పుడు వాటి ప్రయోజనాలు త్వరగా తగ్గిపోతాయి. గత కొన్ని సంవత్సరాలలో ఫ్రంట్-ఎండ్ అభివృద్ధి చాలా క్లిష్టంగా మారింది మరియు CSS మినహాయింపు కాదు. @స్కోప్ నియమం అన్నింటికీ నివారణ కానప్పటికీ, ఇది సంక్లిష్ట సాధనాల అవసరాన్ని తగ్గిస్తుంది. వ్యూహాత్మక తరగతి నామకరణం స్థానంలో లేదా దానితో పాటు ఉపయోగించినప్పుడు, @ స్కోప్ నిర్వహించదగిన CSSని వ్రాయడాన్ని సులభతరం చేస్తుంది మరియు మరింత సరదాగా చేస్తుంది. తదుపరి పఠనం
CSS @స్కోప్ (MDN) “CSS @scope”, జువాన్ డియెగో రోడ్రిగ్జ్ (CSS-ట్రిక్స్) Firefox 146 విడుదల నోట్స్ (Firefox) బ్రౌజర్ మద్దతు (CanIUse) ప్రసిద్ధ CSS ఫ్రేమ్వర్క్లు (CSS స్థితి 2024) CSSలో “C”: క్యాస్కేడ్”, థామస్ యిప్ (CSS-ట్రిక్స్) BEM పరిచయం (BEM పొందండి)