Marka la baranayo mabaadi'da aasaasiga ah ee CSS, mid waxaa la baraa inuu qoro qaab-dhismeed, dib loo isticmaali karo, iyo qaabab qeexid si loo xaqiijiyo joogteynta. Laakiin marka horumariyayaashu ay ku lug yeeshaan codsiyada dhabta ah ee aduunka, badanaa waxa la dareemaa wax aan macquul ahayn in lagu daro sifooyinka UI iyada oo aan qaababku u soo qulqulin meelo aan loo baahnayn. Arintani waxay inta badan ku dhacdaa baraf is-fulinta loop; Hababka aragti ahaan ku kooban hal shay ama fasal ayaa bilaabaya inay muujiyaan meel aanay ka tirsanayn. Tani waxay ku qasbeysaa horumariyaha inuu abuuro xitaa xulashooyin gaar ah si uu uga takhaluso qaababka daadatay, ka dibna si lama filaan ah u tirtira qaababka caalamiga ah, iyo wixii la mid ah. Heshiisyada magaca fasalka adag, sida BEM, ayaa ah hal aragti oo xal ah oo arrintan lagu xallinayo. Habka BEM (Block, Element, Modifier) waa hab habaysan oo lagu magacaabo fasallada CSS si loo hubiyo dib-u-isticmaalka iyo qaabdhismeedka faylalka CSS. Magacaabida heshiisyada sidan oo kale ah waxay yareyn kartaa culeyska garashada iyadoo la adeegsanaayo luqadda domain si loo qeexo walxaha iyo gobolkooda, iyo haddii si sax ah loo fuliyo, waxay ka dhigi kartaa qaababka codsiyada waaweyn si sahlan loo ilaaliyo. Dunida dhabta ah, si kastaba ha ahaatee, had iyo jeer kuma shaqeyso sidaas oo kale. Mudnaanta ayaa isbedeli karta, marka la beddelo, hirgelintu waxay noqotaa mid aan is waafaqsanayn. Isbeddellada yaryar ee qaabka HTML waxay u baahan karaan dib-u-eegis magacyo badan oo fasalka CSS ah. Codsiyada dhammaadka hore ee is-dhexgalka aadka u sarreeya, magacyada fasalka ee raacaya qaabka BEM waxay noqon karaan kuwo dheer oo aan caqli-gal ahayn (tusaale, app-user-overview__status - is-authenticating), oo aan si buuxda loogu hoggaansanayn xeerarka magac-bixinta waxay jebiyaan qaab-dhismeedka nidaamka, sidaas darteed way diidaysaa faa'iidooyinkeeda. Marka la eego caqabadahan, la yaab ma leh in horumariyayaashu ay u jeesteen qaab-dhismeedka, Tailwind waa qaabka ugu caansan ee CSS. Halkii aad isku dayi lahayd inaad la dagaallanto waxa u eg dagaal gaar ah oo aan la guulaysan karin oo u dhexeeya qaababka, way fududahay in laga tanaasulo CSS Cascade oo la isticmaalo aalado dammaanad qaadaya go'doomin dhammaystiran. Horumariyayaashu waxay aad ugu tiirsan yihiin agabka Sideen ku ogaan karnaa in horumariyeyaasha qaarkood ay aad u jecel yihiin inay iska ilaaliyaan qaababka cascaded? Waa kor u kaca "casriga" qalabaynta-dhamaadka hore - sida qaababka CSS-in-JS - oo si gaar ah loogu talagalay ujeedadaas. Ku shaqeynta qaabab go'doonsan oo si adag u xaddidan qaybo gaar ah waxay u ekaan kartaa neefta hawo cusub. Waxay meesha ka saaraysaa baahida loo qabo in la magacaabo - weli waa mid ka mid ah hawlaha ugu horreeya ee la neceb yahay uguna waqti badan - waxayna u ogolaataa horumariyeyaasha inay noqdaan kuwo wax soo saar leh iyaga oo aan si buuxda u fahmin ama aan ka faa'iidaysan faa'iidooyinka dhaxalka CSS. Laakin ka saarida CSS Cascade waxay la timaadaa dhibaatooyinkeeda. Tusaale ahaan, curinta qaababka JavaScript waxay u baahan tahay qaab dhismeed culus oo badanaa waxay horseedaa qaabab si xun u dhexgala calaamadaynta qaybaha ama HTML. Halkii si taxaddar leh looga fiirsaday heshiisyada magacaabista, waxaan u oggolaanaa qalab dhismo si ay u soo saaraan dooriyeyaasha iyo aqoonsiyaasha anaga (tusaale, .jsx-3130221066), una baahan horumariyayaashu inay la socdaan luqad kale oo been abuur ah gudaha iyo lafteeda. (Sida haddii culayska garashada ee fahamka waxa dhammaan qaybahaaga adeegsigooda Saamaynta aanay ku filnayn!) Ka-soo-baxa dheeraadka ah ee shaqada magac-u-dhigista fasallada qalabaynta waxay ka dhigan tahay in cillad-bixinta aasaasiga ahi ay inta badan ku xaddidan tahay noocyada codsiyada gaarka ah ee loo soo ururiyay horumarinta, halkii ay ka faa'iidaysan lahaayeen sifooyinka biraawsarka asalka ah ee taageera khaladka tooska ah, sida Qalabka Horumarinta. Waxay u dhowdahay inaan u baahanahay inaan horumarino qalabka si aan u saxno qalabka aan isticmaaleyno si aan u soo koobno waxa shabakadu horey u bixisay - dhammaan sababtoo ah ka cararidda "xanuunka" qorista heerka CSS. Nasiib wanaag, sifooyinka CSS ee casriga ahi maaha oo kaliya inay qoraalka heerka CSS ka dhigaan mid dabacsan laakiin sidoo kale waxay siinayaa horumariyeyaasha annaga oo kale ah awood aad u weyn oo ay ku maareeyaan qulqulka oo ay noogu shaqeeyaan Lakabyada CSS Cascade waa tusaale weyn, laakiin waxaa jira sifo kale oo helaysa feejignaan la'aan la yaab leh - in kasta oo ay taasi isbeddelayso hadda oo ay dhawaan noqotay mid ku habboon Baseline. CSS @scope At-Rule Waxaan tixgalinayaa CSS @scope at-rule inuu yahay daawo suurtagal ah nooca walwalka qaab- daadinta-ka-soo-baxa ee aan daboolnay, mid naguma qasbina inaan u tanaasulno faa'iidooyinka shabakadaha asalka ah ee soo saarista iyo qalabaynta dheeriga ah. "Xeerka @scope CSS-ku wuxuu awood kuu siinayaa inaad ku doorato canaasirta DOM-hoosaadyada gaarka ah, adoo si sax ah u beegsanaya walxaha iyada oo aan la qorin xulashooyin gaar ah oo ay adagtahay in la tirtiro, iyo adoon ku xidhin kuwa aad dooratay si adag qaabka DOM."
Si kale haddii loo dhigo, waxaan ku shaqayn karnaa qaabab gooni-gooni ah xaalado gaar ah annagoo aan allabari u bixinin dhaxalka, bakhtiinta, ama xitaa kala soocidda aasaasiga ah ee walaacyadakaas oo ahaa mabda'a hagaya muddada dheer ee horumarinta hore. Intaa waxaa dheer, waxay leedahay daboolid browser heer sare ah. Dhab ahaantii, Firefox 146 waxay ku dartay taageerada @scope bishii Disembar, taasoo ka dhigaysa Baseline mid ku habboon markii ugu horreysay. Halkan waxaa ah isbarbardhigga fudud ee u dhexeeya badhanka iyadoo la adeegsanayo qaabka BEM iyo xeerka @scope:
Xeerka @scope wuxuu ogolaanayaa saxnaanta kakanaanta yar. Horumariyuhu mar dambe uma baahna inuu abuuro xuduud isagoo isticmaalaya magacyada fasalka, taas oo, markeeda, u oggolaanaysa inay qoraan xulashooyin ku salaysan curiyeyaasha HTML ee asalka ah, taas oo meesha ka saaraysa baahida loo qabo qaababka magaca fasalka CSS. Adigoo si fudud meesha uga saaraya baahida maareynta magaca fasalka, @scope waxay yareyn kartaa cabsida la xiriirta CSS ee mashaariicda waaweyn.
Isticmaalka aasaasiga ah
Si aad u bilawdo, ku dar xeerka @scope CSS kaaga oo geli xidid dooriye qaababka la qiyaasi doono:
@scope (
Marka, tusaale ahaan, haddii aan ku cabbirno qaababka
@scope (nav) { a {/* Hababka isku xidhka ee ku dhex jira xadka badda */ }
a: Firfircoon {/* Hababka isku xidhka firfircoon */ }
a: Firfircoon:: ka hor {/* Xidhiidh firfircoon oo leh unug been abuur ah oo loogu talagalay habayn dheeri ah */}
@media (ballaca ugu badan: 768px) { a {/* hagaajinta jawaabta */ } } }
Tani, keligiis, maaha muuqaal soo jiidasho leh. Si kastaba ha ahaatee, dood labaad ayaa lagu dari karaa baaxadda si loo abuuro xuduud hoose, si wax ku ool ah u qeexaya baaxadda bilowga iyo dhammaadka dhibcaha.
/* Wax kasta oo ka tirsan ul ma yeelan doonaan qaababka lagu dabaqay */ @scope (nav) ilaa (ul) { ah { cabbirka font: 14px; } }
Dhaqankan waxaa loo yaqaannaa qoob-ka-cayaarka, waxaana jira dhowr habab oo la isticmaali karo, oo ay ku jiraan taxane la mid ah, xulashooyin gaar ah oo si adag ugu xiran qaab-dhismeedka DOM, a: ma aha-dooriye, ama ku meelaynta magacyo gaar ah walxaha ku jira
Gabagabo Utility-Utility-Utility CSS qaab-dhismeedka, sida Tailwind, ayaa si fiican ugu shaqeeya soo saarista iyo mashaariicda yaryar. Si kastaba ha ahaatee, faa'iidooyinkoodu si dhakhso ah ayey u yareeyaan, si kastaba ha ahaatee, marka loo isticmaalo mashaariicda waaweyn ee ku lug leh wax ka badan dhowr horumariye. Horumarka-dhamaadka hore waxa uu noqday mid si isa soo taraysa u sii cakiran dhawrkii sano ee la soo dhaafay, CSS-na kama reebo. Iyadoo xeerka @scope uusan ahayn dawo-dhammaan, waxay yarayn kartaa baahida qalabaynta adag. Marka lagu isticmaalo meel, ama ay weheliso magacaabista fasalka istiraatijiyadeed, @scope waxay ka dhigi kartaa mid fudud oo xiiso badan in la qoro CSS la ilaalin karo. Akhris Dheeraad ah
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Tricks) Firefox 146 Xusuusin sii deynta (Firefox) Taageerada Browser (CanIUse) Qaab-dhismeedka CSS ee caanka ah (State of CSS 2024) "C" ee ku jira CSS: Cascade, Thomas Yip (CSS-Tricks) Hordhac BEM (Hel BEM)
