Xa ufunda imigaqo ye-CSS esisiseko, umntu ufundiswa ukubhala iimodyuli, ezisebenzisekayo, kunye nezimbo ezichazayo zokuqinisekisa ukugcinwa. Kodwa xa abaphuhlisi bebandakanyeka kusetyenziso lwehlabathi lokwenyani, kuhlala kuvakala kungenakwenzeka ukongeza iimpawu ze-UI ngaphandle kwezitayile ezivuza kwiindawo ezingacetywanga. Lo mbandela udla ngokuba yi-snowball ibe yi-self-fulfilling loop; Izitayile ezithiyori zijonge into enye okanye udidi ziqala ukuvela apho zingekhoyo. Oku kunyanzela umphuhlisi ukuba enze abakhethi abathile ukuba bagqithise izitayile ezivuzayo, ezithi emva koko zibeke ngaphezulu ngempazamo izitayile zehlabathi, njalo njalo. Iingqungquthela zamagama eklasi eziqinileyo, ezifana ne-BEM, zisisombululo sethiyori kulo mba. Indlela ye-BEM (iBlock, i-Element, i-Modifier) yindlela ecwangcisiweyo yokubiza iiklasi ze-CSS ukuqinisekisa ukusetyenziswa kwakhona kunye nokwakheka ngaphakathi kweefayile ze-CSS. Ukuqamba amagama afana nalokhu kunokunciphisa umthwalo wokuqonda ngokusetyenziswa kolwimi lwesizinda ukuchaza izinto kunye nesimo sazo, kwaye ukuba ziphunyezwe ngokuchanekileyo, zingenza izitayela zezicelo ezinkulu zibe lula ukuzigcina. Kwihlabathi lokwenyani, nangona kunjalo, ayisoloko isebenza njalo. Izinto eziphambili zinokutshintsha, kwaye ngotshintsho, ukuphunyezwa akuhambelani. Utshintsho oluncinci kulwakhiwo lwe-HTML lunokufuna uhlaziyo lwamagama amaninzi eklasi yeCSS. Ngezicelo ezisebenzisanayo eziphambili, amagama eeklasi alandela ipateni ye-BEM anokuba made kwaye angabikho (umzekelo, i-app-user-overview__status-is-authenticating), kwaye ukungahambelani ngokupheleleyo nemigaqo yokubiza kwaphula isakhiwo senkqubo, ngaloo ndlela igatya izibonelelo zayo. Ngenxa yolu celomngeni, akumangalisi ukuba abaphuhlisi bajike kwisakhelo, i-Tailwind yeyona nkqubo idumileyo yeCSS. Kunokuba uzame ukulwa into ebonakala ngathi yimfazwe ethile engaphumeleliyo phakathi kwezitayile, kulula ukuyincama kwiCSS Cascade kwaye usebenzise izixhobo eziqinisekisa ukuba wedwa ngokupheleleyo. Abaphuhlisi bathembele ngakumbi kwii-Utility Sazi njani ukuba abanye abaphuhlisi bazimisele ukunqanda izitayile ze-cascade? Kukunyuka kwezixhobo "zangoku" zangaphambili - njengezicwangciso ze-CSS-in-JS - ezenzelwe ngokukodwa loo njongo. Ukusebenza ngezitayile ezizimeleyo ezibekwe ngokuqinileyo kumacandelo athile kunokubonakala ngathi ngumoya omtsha. Isusa imfuno yokubiza izinto - isengomnye weyona misebenzi ithiyelweyo kwaye ithatha ixesha eliphambili - kwaye ivumela abaphuhlisi ukuba babe nemveliso ngaphandle kokuqonda ngokupheleleyo okanye ukuxhamla izibonelelo zelifa leCSS. Kodwa ukuyeka i-CSS Cascade iza neengxaki zayo. Umzekelo, ukuqamba izitayile kwiJavaScript kufuna uqwalaselo lolwakhiwo olunzima kwaye kaninzi lukhokelela kwizitayile ezidityaniswayo kunye nophawu lwecandelo okanye iHTML. Endaweni yokuba siqwalaselwe ngononophelo izivumelwano zokuthiya amagama, sivumela izixhobo zokwakha ukuba zizenzele thina abakhethi kunye nezichongi (umzekelo, .jsx-3130221066), ifuna abaphuhlisi bahambelane nolunye ulwimi lobuxoki ngaphakathi kwaye ngokwalo. (Ngokungathi umthwalo wokuqonda wokuqonda ukuba yintoni yonke into eyenziwa licandelo lakhoIziphumo bezingonelanga!) Ukukhuphela ngakumbi umsebenzi othiya iiklasi kwisixhobo kuthetha ukuba ukulungisa iimpazamo kukholisa ukunyanzelwa kwiinguqulelo zesicelo ezithile ezidityaniselwe uphuhliso, kunokuba kusetyenziswe iimpawu zesikhangeli semveli ezixhasa ukulungisa ingxaki, njengeZixhobo zoMphuhlisi. Kuphantse kube ngathi kufuneka siphuhlise izixhobo zokulungisa izixhobo esizisebenzisayo ukukhupha into esele inikezelwe yiwebhu - konke ngenxa yokubaleka "iintlungu" zokubhala iCSS eqhelekileyo. Ngethamsanqa, iimpawu zale mihla ze-CSS azenzi nje ukubhala kwe-CSS esemgangathweni kube bhetyebhetye ngakumbi kodwa zinika abaphuhlisi abafana nathi amandla amakhulu okulawula i-cascade kwaye bayenze isisebenzele. I-CSS Cascade Layers ngumzekelo omhle, kodwa kukho enye into efumana ukunqongophala okumangalisayo kwengqalelo - nangona oko kuyatshintsha ngoku kuba kutshanje kuhambelana neBaseline. I-CSS @scope kuMthetho Ndithatha i-CSS @scope kumthetho njengonyango olunokubakho kuhlobo lwesitayile-oluvuzayo-lunxunguphalo esilugubungeleyo, olungasinyanzeliyo ukuba sibeke esichengeni izibonelelo zewebhu zendalo zokuthatha izinto kunye nezixhobo ezongezelelweyo zokwakha. "I-@scope CSS at-rule ikuvumela ukuba ukhethe izinto kwii-subtrees ezithile ze-DOM, ujolise kwizinto ngokuchanekileyo ngaphandle kokubhala abakhethi abakhethekileyo ekunzima ukuyibhala ngaphezulu, kwaye ngaphandle kokudibanisa abakhethi bakho ngokuqinileyo kwisakhiwo seDOM." - MDN
Ngamanye amazwi, sinokusebenza ngezitayile ezizimeleyo kwiimeko ezithile ngaphandle kokuncama ilifa, i-cascading, okanye ukwahlula okusisiseko kweenkxalabo.oko kube ngumgaqo okhokelayo ixesha elide wophuhliso lwangaphambili.
Ukongeza, inokufikelela kwibrowser ebalaseleyo. Ngapha koko, iFirefox 146 yongeze inkxaso ye-@scope ngoDisemba, iyenza iBaseline ihambelane okokuqala. Nalu uthelekiso olulula phakathi kweqhosha usebenzisa ipateni yeBEM ngokuchasene nomthetho we-@scope:
Umgaqo we-@scope uvumela ukuchaneka kunye nobunzima obuncinci. Umphuhlisi akasekho mfuneko yokuba enze imida esebenzisa amagama eklasi, nto leyo evumela ukuba babhale abakhethi basekwe kwizinto zomthonyama zeHTML, ngaloo ndlela besusa imfuneko yeepatheni zamagama eklasi yeCSS. Ngokususa nje imfuno yolawulo lwamagama eklasi, @scope inokunciphisa uloyiko oluhambelana neCSS kwiiprojekthi ezinkulu.
Usetyenziso olusisiseko
Ukuqalisa, yongeza umthetho we-@scope kwi-CSS yakho kwaye ufake umkhethi weengcambu apho izimbo ziya kujongwa:
@scope (
Ngoko, umzekelo, ukuba besiza kujonga izimbo kwi
@scope (nav) { a {/* Ikhonkco lezimbo ngaphakathi kobubanzi be-nav */}
a: esebenzayo { /* Izimbo zekhonkco ezisebenzayo */ }
a:esebenzayo::phambi /* Ikhonkco elisebenzayo elinesiqalelo esingusinga-singa kwisitayile esongezelelweyo */}
@media (ububanzi-ubukhulu: 768px) { a {/* Uhlengahlengiso oluphendulayo */ } } }
Oku, ngokwayo, ayisiyonto ibalulekileyo. Nangona kunjalo, ingxabano yesibini inokongezwa kwi-scope yokudala umda ophantsi, ichaza ngokufanelekileyo isiqalo somda kunye nokuphela kwamanqaku.
/* Nayiphi na into engaphakathi kwi-ul ayinakuba nezimbo ezisetyenziswayo */ @scope (nav) ukuya (ul) { a { ubungakanani befonti: 14px; } }
Olu qheliselo lubizwa ngokuba yi-donut scoping, kwaye kukho iindlela ezininzi umntu anokuzisebenzisa, ukuquka uthotho lwezikhewu ezifanayo, ezithe ngqo kakhulu zabakhethi ezidityaniswe ngokuqinileyo kulwakhiwo lweDOM, a :hayi pseudo-umkhethi, okanye ukwabela amagama eklasi ethile izinto ngaphakathi
