Kung nahibal-an ang mga prinsipyo sa batakang CSS, gitudloan ang usa sa pagsulat sa modular, magamit pag-usab, ug deskriptibo nga mga istilo aron masiguro ang pagpadayon. Apan kung ang mga nag-develop nalambigit sa mga aplikasyon sa tinuud nga kalibutan, kanunay nga gibati nga imposible nga idugang ang mga bahin sa UI nga wala’y mga istilo nga nagtulo sa wala damha nga mga lugar. Kini nga isyu kanunay nga nag-snowballs ngadto sa usa ka self-fulfilling loop; Ang mga estilo nga sa teoriya nga gisangkapan sa usa ka elemento o klase nagsugod sa pagpakita kung diin sila dili angay. Gipugos niini ang nag-develop sa paghimo og mas espesipikong mga tigpili aron i-override ang mga leaked nga mga estilo, nga dayon aksidenteng ma-override ang mga global nga estilo, ug uban pa. Ang estrikto nga mga kombensiyon sa ngalan sa klase, sama sa BEM, usa ka teoretikal nga solusyon niini nga isyu. Ang BEM (Block, Element, Modifier) nga metodolohiya usa ka sistematikong paagi sa pagngalan sa mga klase sa CSS aron maseguro nga magamit pag-usab ug istruktura sulod sa mga file sa CSS. Ang pagngalan sa mga kombensiyon nga sama niini makapakunhod sa cognitive load pinaagi sa paggamit sa domain nga pinulongan aron ihulagway ang mga elemento ug ang ilang estado, ug kon ipatuman sa husto, makahimo sa mga estilo alang sa dagkong mga aplikasyon nga mas sayon sa pagmentinar. Sa tinuud nga kalibutan, bisan pa, dili kini kanunay nga ingon niana. Mahimong mabag-o ang mga prayoridad, ug sa pagbag-o, ang pagpatuman mahimong dili managsama. Ang gagmay nga mga pagbag-o sa istruktura sa HTML mahimong magkinahanglan daghang mga pagbag-o sa ngalan sa klase sa CSS. Uban sa hilabihan ka interactive nga front-end nga mga aplikasyon, ang mga ngalan sa klase nga nagsunod sa BEM pattern mahimong taas ug dili magamit (pananglitan, app-user-overview__status--is-authenticating), ug ang dili hingpit nga pagsunod sa mga lagda sa pagngalan makaguba sa istruktura sa sistema, sa ingon mabaliwala ang mga benepisyo niini. Tungod niini nga mga hagit, dili ikatingala nga ang mga developers mibalik ngadto sa mga frameworks, ang Tailwind mao ang pinakasikat nga CSS framework. Imbis nga sulayan nga makig-away kung unsa ang ingon usa ka dili madaog nga espesipiko nga gubat tali sa mga istilo, mas dali nga mohunong sa CSS Cascade ug mogamit mga himan nga naggarantiya sa hingpit nga pagkahimulag. Ang mga Nag-develop Nagsalig og Dugang sa Mga Utility Giunsa naton nahibal-an nga ang pipila nga mga nag-develop gusto nga likayan ang mga istilo sa cascaded? Kini ang pagsaka sa "moderno" nga front-end tooling - sama sa CSS-in-JS frameworks - nga gidisenyo alang niana nga katuyoan. Ang pagtrabaho uban ang nahilain nga mga istilo nga hugot nga gisangkapan sa piho nga mga sangkap mahimo’g ingon usa ka gininhawa sa presko nga hangin. Gikuha niini ang panginahanglan sa pagngalan sa mga butang - usa gihapon sa labing gikasilagan ug makagugol sa oras nga mga buluhaton sa unahan - ug gitugotan ang mga developer nga mahimong produktibo nga wala’y hingpit nga pagsabut o paggamit sa mga benepisyo sa kabilin sa CSS. Apan ang pagtangtang sa CSS Cascade adunay kaugalingon nga mga problema. Pananglitan, ang pag-compose sa mga istilo sa JavaScript nanginahanglan ug bug-at nga mga pag-configure sa pagtukod ug kanunay nga nagdala sa mga istilo nga dili maayo nga nagsagol sa markup sa sangkap o HTML. Imbes nga konsiderahon pag-ayo ang mga kombensiyon sa pagngalan, tugotan namo ang paghimo og mga himan aron makamugna og awtomatik nga mga tigpili ug mga identifier para kanamo (pananglitan, .jsx-3130221066), nga nagkinahanglan sa mga developers nga makasunod sa laing pseudo-language sa sulod ug sa iyang kaugalingon. (Ingon og dili pa igo ang cognitive load sa pagsabot kung unsa ang gibuhat sa tanan nimong component nga useEffects!) Ang dugang nga pag-abstract sa trabaho sa pagngalan sa mga klase ngadto sa tooling nagpasabot nga ang batakang pag-debug kanunay nga gipugngan sa piho nga mga bersyon sa aplikasyon nga giipon alang sa kalamboan, imbes nga gamiton ang lumad nga mga feature sa browser nga nagsuporta sa live debugging, sama sa Developer Tools. Sama ra nga kinahanglan namon nga maghimo mga himan aron ma-debug ang mga himan nga among gigamit aron makuha kung unsa ang gihatag na sa web - tanan alang sa paglayas gikan sa "kasakit" sa pagsulat sa standard nga CSS. Maayo na lang, ang modernong CSS nga mga feature dili lang makahimo sa pagsulat sa standard nga CSS nga mas flexible apan naghatag usab sa mga developers nga sama kanamo og mas dakong gahum sa pagdumala sa cascade ug paghimo niini nga trabaho alang kanamo. Ang CSS Cascade Layers usa ka maayong panig-ingnan, apan adunay lain nga bahin nga nakakuha usa ka katingad-an nga kakulang sa atensyon - bisan kung kana nagbag-o karon nga kini bag-o lang nahimo nga Baseline compatible. Ang CSS @scope At-Rule Giisip nako ang CSS @scope at-rule nga usa ka potensyal nga tambal alang sa matang sa style-leak-induced nga kabalaka nga among gitabonan, usa nga wala magpugos kanamo sa pagkompromiso sa lumad nga mga bentaha sa web alang sa mga abstraction ug dugang nga tooling sa pagtukod. "Ang @scope CSS at-rule makapahimo kanimo sa pagpili sa mga elemento sa espesipikong mga subtree sa DOM, pag-target sa mga elemento sa tukma nga walay pagsulat sa sobra ka espesipiko nga mga tigpili nga lisud i-override, ug walay pagdugtong sa imong mga pinili nga hugot kaayo sa istruktura sa DOM." - MDN
Sa laing pagkasulti, mahimo kitang magtrabaho uban ang nahilain nga mga istilo sa piho nga mga higayon nga wala isakripisyo ang kabilin, pag-cascade, o bisan ang sukaranan nga pagbulag sa mga kabalakakana usa ka dugay nang naggiya nga prinsipyo sa pag-uswag sa unahan. Dugang pa, kini adunay maayo kaayo nga sakup sa browser. Sa tinuud, ang Firefox 146 nagdugang suporta alang sa @scope kaniadtong Disyembre, nga gihimo kini nga Baseline nga katugma sa unang higayon. Ania ang usa ka yano nga pagtandi tali sa usa ka buton gamit ang BEM pattern kumpara sa @scope nga lagda:
Ang @scope nga lagda nagtugot alang sa katukma nga dili kaayo komplikado. Ang developer dili na kinahanglan nga maghimo mga utlanan gamit ang mga ngalan sa klase, nga, sa baylo, nagtugot kanila sa pagsulat sa mga tigpili pinasukad sa lumad nga mga elemento sa HTML, sa ingon nagwagtang sa panginahanglan alang sa prescriptive CSS class name patterns. Pinaagi lamang sa pagtangtang sa panginahanglan sa pagdumala sa ngalan sa klase, ang @scope makapakunhod sa kahadlok nga nalangkit sa CSS sa dagkong mga proyekto.
Batakang Paggamit
Aron makasugod, idugang ang @scope nga lagda sa imong CSS ug isulod ang usa ka root selector kung asa nga mga estilo ang masakop:
@sakupan (
Busa, pananglitan, kon kita magsangkap sa mga estilo sa usa ka
@scope (nav) { a { /* Mga estilo sa link sulod sa nav scope */ }
a:aktibo { /* Aktibo nga mga estilo sa link */ }
a:active::before { /* Aktibo nga link nga adunay pseudo-element para sa dugang nga estilo */ }
@media (max-lapad: 768px) { usa ka { /* Responsive adjustments */ } } }
Kini, sa iyang kaugalingon, dili usa ka groundbreaking nga bahin. Bisan pa, ang usa ka ikaduha nga argumento mahimong idugang sa sakup aron makahimo usa ka ubos nga utlanan, nga epektibo nga nagpaila sa mga punto sa pagsugod ug katapusan sa sakup.
/* Bisan unsa nga elemento sa sulod sa ul dili ipadapat ang mga estilo */ @scope (nav) ngadto sa (ul) { usa ka { gidak-on sa font: 14px; } }
Kini nga praktis gitawag nga donut scoping, ug adunay daghang mga pamaagi nga magamit sa usa, lakip ang usa ka serye sa parehas, labi ka piho nga mga pinili nga gidugtong sa istruktura sa DOM, usa ka: dili pseudo-selector, o pag-assign sa piho nga mga ngalan sa klase sa mga elemento sa sulod sa
Panapos Utility-first CSS frameworks, sama sa Tailwind, maayo alang sa prototyping ug mas gagmay nga mga proyekto. Ang ilang mga benepisyo dali nga mokunhod, bisan pa, kung gigamit sa dagkong mga proyekto nga naglambigit labaw pa sa usa ka magtiayon nga mga developer. Ang pag-uswag sa front-end nahimong labi ka komplikado sa miaging pipila ka tuig, ug ang CSS dili eksepsiyon. Samtang ang @scope nga lagda dili usa ka tambal-tanan, kini makapakunhod sa panginahanglan alang sa komplikado nga himan. Kung gigamit puli sa, o kauban sa estratehikong pagngalan sa klase, ang @scope makapasayon ug mas makalingaw sa pagsulat sa mapadayon nga CSS. Dugang nga Pagbasa
CSS @sakupan (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Firefox 146 Release Notes (Firefox) Suporta sa Browser (CanIUse) Popular nga CSS Frameworks (Estado sa CSS 2024) "Ang "C" sa CSS: Cascade", Thomas Yip (CSS-Tricks) BEM Introduction (Kuhaa ang BEM)
