کله چې د بنسټیز CSS اصول زده کړئ، یو چا ته د ماډلر، بیا کارونې وړ، او توضیحي سټایلونو لیکلو لپاره درس ورکول کیږي ترڅو د ساتلو ډاډ ترلاسه شي. مګر کله چې پراختیا کونکي د ریښتیني نړۍ غوښتنلیکونو سره ښکیل شي ، نو ډیری وختونه د UI ب featuresو اضافه کول ناممکن احساس کوي پرته لدې چې سټایلونه په غیر ارادي سیمو کې لیک شي. دا مسله ډیری وختونه د ځان بشپړولو لوپ ته د واورې بالونه ورکوي. هغه سټایلونه چې په تیوریکي ډول یو عنصر یا ټولګي پورې محدود شوي دي په هغه ځای کې ښودل پیل کوي چیرې چې دوی تړاو نلري. دا پراختیا کونکی مجبوروي چې حتی نور ځانګړي انتخاب کونکي رامینځته کړي ترڅو لیک شوي سټایلونه له پامه وغورځوي ، کوم چې بیا په ناڅاپي ډول نړیوال سټایلونه له پامه غورځوي ، او داسې نور. د سخت ټولګي نوم کنوانسیونونه، لکه BEM، د دې مسلې یو نظري حل دی. د BEM (بلاک، عنصر، موډیفایر) میتودولوژي د CSS ټولګیو نومولو سیسټمیک لاره ده ترڅو د CSS فایلونو کې د بیا کارونې وړتیا او جوړښت ډاډمن کړي. د دې په څیر د نوم ورکولو کنوانسیونونه کولی شي د عناصرو او د دوی حالت تشریح کولو لپاره د ډومین ژبې په کارولو سره ادراکي بار کم کړي ، او که په سمه توګه پلي شي ، کولی شي د لوی غوښتنلیکونو لپاره سټایلونه اسانه وساتي. په ریښتینې نړۍ کې، په هرصورت، دا تل د دې په څیر کار نه کوي. لومړیتوبونه بدلون مومي، او د بدلون سره، تطبیق متضاد کیږي. د HTML جوړښت کې کوچني بدلونونه کولی شي ډیری CSS ټولګي نوم بیاکتنې ته اړتیا ولري. د خورا متقابل مخکیني غوښتنلیکونو سره ، د BEM نمونې لاندې د ټولګي نومونه اوږد او ناخوښه کیدی شي (د مثال په توګه ، د ایپ کارونکي-څیړنې__ حیثیت--استثنی کیږي) ، او د نوم ورکولو قواعدو ته په بشپړ ډول نه مراعت کول د سیسټم جوړښت ماتوي ، په دې توګه د دې ګټې منفي کوي. د دې ننګونو په پام کې نیولو سره، دا د حیرانتیا خبره نده چې پراختیا کونکي چوکاټونو ته مخه کړي، ټیل وینډ د CSS خورا مشهور چوکاټ دی. د دې پرځای چې د سټایلونو ترمینځ د نه ګټلو ځانګړي جنګ په څیر د مبارزې هڅه وکړئ ، د CSS کاسکیډ پریښودل اسانه دي او داسې وسیلې وکاروئ چې بشپړ انزوا تضمین کړي. پراختیا کونکي په اسانتیاو ډیر تکیه کوي موږ څنګه پوهیږو چې ځینې پراختیا کونکي د کاسکیډ سټایلونو څخه مخنیوي ته لیواله دي؟ دا د "عصري" مخکښې پای وسیلې وده ده - لکه د CSS-in-JS چوکاټ - په ځانګړي ډول د دې هدف لپاره ډیزاین شوی. د جلا شوي سټایلونو سره کار کول چې ځانګړي اجزاو ته په کلکه پوښل شوي د تازه هوا تنفس په څیر ښکاري. دا د شیانو نومولو اړتیا لرې کوي - لاهم یو له خورا کرکه او د وخت مصرف کونکي مخکښې دندې - او پراختیا کونکو ته اجازه ورکوي چې د CSS میراث ګټې په بشپړ ډول پوهیدو یا ګټه پورته کولو پرته ګټور وي. مګر د CSS کاسکیډ پریښودل د خپلو ستونزو سره راځي. د مثال په توګه، په جاواسکریپټ کې د سټایلونو کمپوز کول د درنو ساختماني تشکیلاتو ته اړتیا لري او ډیری وختونه د سټایلونو لامل کیږي چې په عجیب ډول د اجزاو مارک اپ یا HTML سره یوځای کیږي. د دې پرځای چې په دقت سره د نوم ورکولو کنوانسیونونه په پام کې ونیول شي، موږ د جوړولو وسیلو ته اجازه ورکوو چې زموږ لپاره ټاکونکي او پیژندونکي په اتوماتيک ډول تولید کړي (د بیلګې په توګه، jsx-3130221066)، چې پراختیا ورکوونکي ته اړتیا لري چې په خپل ځان کې د بلې سیډو-ژبې سره وساتي. (لکه څنګه چې د پوهیدو ادراکي بار چې ستاسو د ټولې برخې کارولو اغیزې لا دمخه کافي ندي!) وسیلې ته د ټولګیو نومولو دندې نور خلاصول پدې معنی دي چې لومړني ډیبګ کول اکثرا د پراختیا لپاره ترتیب شوي ځانګړي غوښتنلیک نسخو پورې محدود وي ، د دې پرځای چې د اصلي براوزر ځانګړتیاو څخه ګټه پورته کړي چې د ژوندی ډیبګ کولو ملاتړ کوي ، لکه د پراختیا کونکي اوزار. دا تقریبا داسې دی چې موږ اړتیا لرو د هغه وسیلو ډیبګ کولو لپاره وسیلې رامینځته کړو چې موږ یې د خلاصولو لپاره کاروو هغه څه چې ویب دمخه وړاندې کوي - ټول د معیاري CSS لیکلو "درد" څخه د تیښتې لپاره. خوشبختانه، د CSS عصري ځانګړتیاوې نه یوازې د معیاري CSS لیکل ډیر انعطاف وړ کوي بلکې زموږ په څیر پراختیا کونکو ته د کاسکیډ اداره کولو او دا زموږ لپاره کار کولو لپاره خورا لوی ځواک ورکوي. د سی ایس ایس کاسکیډ پرتونه یو ښه مثال دی، مګر یو بل ځانګړتیا شتون لري چې د حیرانتیا وړ پاملرنې نشتوالی لري - که څه هم دا اوس بدلیږي چې دا په دې وروستیو کې د اساس سره مطابقت لري. د CSS @scope At-Rule زه د CSS @scope at-rule په پام کې نیسم چې د سټایل لیک - هڅول شوي اضطراب ډول لپاره احتمالي درملنه وي چې موږ یې پوښلي ، یو هغه چې موږ نه اړوي چې د خلاصون او اضافي جوړونې وسیلې لپاره د اصلي ویب ګټو سره موافقت وکړو. "د @scope CSS at-rule تاسو ته وړتیا درکوي چې د DOM په ځانګړي فرعي درختو کې عناصر وټاکئ، عناصر په دقیق ډول په نښه کړئ پرته له دې چې د ډیر مشخص انتخاب کونکو لیکلو څخه پرته چې له پامه غورځول ګران دي، او پرته له دې چې ستاسو انتخاب کونکي د DOM جوړښت سره په کلکه سره یوځای کړئ." - MDN
په بل عبارت، موږ کولی شو په ځانګړو مواردو کې د جلا شوي سټایلونو سره کار وکړو پرته له دې چې د میراث قرباني، یا حتی د اندیښنو بنسټیز جلا کول.دا د مخکښې پای پراختیا لپاره د اوږدې مودې لارښود اصول دی. برسیره پردې، دا د براوزر غوره پوښښ لري. په حقیقت کې، فایرفوکس 146 د ډسمبر په میاشت کې د @سکوپ لپاره ملاتړ اضافه کړ، چې دا د لومړي ځل لپاره بیس لاین سره مطابقت لري. دلته د @سکوپ قاعدې په مقابل کې د BEM نمونې په کارولو سره د تڼۍ ترمینځ ساده پرتله کول دي:
د @سکوپ قاعده د لږ پیچلتیا سره دقت لپاره اجازه ورکوي. پراختیا کونکی نور اړتیا نلري د ټولګي نومونو په کارولو سره حدود رامینځته کړي ، کوم چې په پایله کې دوی ته اجازه ورکوي چې د اصلي HTML عناصرو پراساس انتخاب کونکي ولیکئ ، په دې توګه د نسخې CSS ټولګي نوم نمونو اړتیا له مینځه وړي. په ساده ډول د ټولګي نوم مدیریت اړتیا لرې کولو سره، @scope کولی شي په لویو پروژو کې د CSS سره تړلې ویره کمه کړي. بنسټیز کارول د پیل کولو لپاره، خپل سی ایس ایس ته د @سکوپ قاعده اضافه کړئ او د روټ ټاکونکی داخل کړئ کوم سټایلونه به پکې ځای په ځای شي: @سکوپ (<ټاکونکی>) { /* سټایلونه د <ټاکونکي> */ ته محدود شوي }
نو، د مثال په توګه، که موږ یو
@scope (nav) { a { /* د لینک سټایلونه د نوي دائرې دننه */ }
a:فعال { /* د فعال لینک سټایل */ }
a:active::fore { /* د اضافي سټایل کولو لپاره د سیډو عنصر سره فعال لینک */ }
@میډیا (زیاته چوکۍ: 768px) { a { /* ځواب ورکوونکي سمونونه */ } } }
دا، پخپله، د پام وړ ځانګړتیا نه ده. په هرصورت، یو دویم دلیل په ساحه کې اضافه کیدی شي ترڅو ټیټ حد رامینځته کړي، په مؤثره توګه د ساحې پیل او پای ټکي تعریفوي.
/* د ul دننه کوم عنصر به سټایلونه ونه پلي کړي */ @scope (nav) ته (ul) { یو { د فونټ اندازه: 14px؛ } }
دا عمل د ډونټ سکوپینګ په نوم یادیږي، او ډیری طریقې شتون لري چې یو یې کارولی شي، په شمول د ورته، خورا مشخص انتخاب کونکو لړۍ چې د DOM جوړښت سره په ټینګه سره یوځای شوي، a :not pseudo-selector، یا عناصرو ته د ځانګړي ټولګي نومونه په
پایله د کارونې لومړی سی ایس ایس چوکاټونه، لکه ټیل وینډ، د پروټوټایپ او کوچنیو پروژو لپاره ښه کار کوي. د دوی ګټې په چټکۍ سره کمیږي، په هرصورت، کله چې په لویو پروژو کې کارول کیږي چې د څو څخه زیات پراختیا کونکي پکې شامل وي. د مخکینۍ پای پراختیا په تیرو څو کلونو کې په زیاتیدونکې توګه پیچلې شوې، او CSS هیڅ استثنا نه ده. پداسې حال کې چې د @سکوپ قاعده درملنه نده - ټول، دا کولی شي د پیچلي وسیلو اړتیا کمه کړي. کله چې د ستراتیژیک ټولګي نومونې په ځای یا د ځای پرځای کارول کیږي، @scope کولی شي د ساتلو وړ CSS لیکلو لپاره اسانه او ډیر ساتیري کړي. نور لوستل
CSS @scope (MDN) "CSS @scope"، جوان ډیاګو روډریګز (CSS-Tricks) د فایرفوکس 146 ریلیز یادښتونه (فایرفاکس) د براوزر ملاتړ (CanIUse) د CSS مشهور چوکاټونه (د CSS 2024 حالت) "C" په CSS کې: Cascade، توماس یپ (CSS-Tricks) د BEM پیژندنه (BEM ترلاسه کړئ)