Ha motho a ithuta melao-motheo ea CSS ea motheo, o rutoa ho ngola mekhoa ea modular, e ka sebelisoang hape le e hlalosang ho etsa bonnete ba hore o boloka. Empa ha bahlahisi ba kenella lits'ebetsong tsa lefats'e la 'nete, hangata ho ikutloa ho sa khonehe ho eketsa likarolo tsa UI ntle le mekhoa e kenang libakeng tse sa lebelloang. Taba ena e atisa ho ba lehloeng la boithatelo; Litaele tseo ho thoeng li fetisetsoa karolong e le 'ngoe kapa sehlopha li qala ho hlaha moo li sa lokelang. Sena se qobella moqapi hore a thehe bakhethoa ba ikhethileng ho feta mekhoa e lutlang, eo ka phoso e fetisang mekhoa ea lefats'e, joalo-joalo. Likopano tse thata tsa mabitso a sehlopha, joalo ka BEM, ke tharollo e le 'ngoe ea taba ena. Mokhoa oa BEM (Block, Element, Modifier) ke mokhoa o hlophisitsoeng oa ho reha lihlopha tsa CSS ho netefatsa ts'ebeliso le sebopeho ka har'a lifaele tsa CSS. Ho reha mabitso a joalo ka sena ho ka fokotsa moroalo oa kelello ka ho sebelisa puo ea domain name ho hlalosa likarolo le boemo ba tsona, 'me haeba li sebelisoa ka nepo, li ka etsa hore mekhoa ea lits'ebetso tse kholo e be bonolo ho e boloka. Lefats'eng la 'nete, leha ho le joalo, ha se kamehla e sebetsang joalo. Lintho tse tlang pele li ka fetoha, 'me ka phetoho, ts'ebetsong e fetoha e sa lumellaneng. Liphetoho tse nyane ho sebopeho sa HTML li ka hloka liphetolelo tse ngata tsa mabitso a sehlopha sa CSS. Ka lits'ebetso tse ka pele tse sebelisanang haholo, mabitso a sehlopha a latelang mokhoa oa BEM a ka fetoha nako e telele le a sa utloahaleng (mohlala, app-user-overview__status--is-authenticating), 'me ho se ikamahanye ka botlalo le melao ea ho reha mabitso ho senya sebopeho sa sistimi, ka hona ho hana melemo ea eona. Ka lebaka la mathata ana, ha ho makatse hore ebe bahlahisi ba fetohetse ho meralo, Tailwind e le eona moralo o tsebahalang haholo oa CSS. Ho e-na le ho leka ho loantša se bonahalang eka ke ntoa e khethehileng e ke keng ea hlōloa pakeng tsa litaele, ho bonolo ho tlohela CSS Cascade le ho sebelisa lisebelisoa tse tiisang ho itšehla thajana ka ho feletseng. Bahlahisi ba Itšetleha Haholo ho Litšebeliso Re tseba joang hore bahlahisi ba bang ba chesehela ho qoba litaele tsa cascaded? Ke ho phahama ha lisebelisoa tsa "sejoale-joale" - joalo ka meralo ea CSS-in-JS - e etselitsoeng morero oo ka ho khetheha. Ho sebetsa ka mekhoa e ikemetseng e kentsoeng ka thata ho likarolo tse itseng ho ka bonahala eka ke moea oa moea o hloekileng. E tlosa tlhokahalo ea ho reha lintho mabitso - e ntse e le e 'ngoe ea mesebetsi ea pele e hloiloeng le e senyang nako -' me e lumella bahlahisi hore ba be le tlhahiso ntle le ho utloisisa ka botlalo kapa ho sebelisa melemo ea lefa la CSS. Empa ho lahla CSS Cascade ho tla le mathata a eona. Mohlala, ho etsa setaele ho JavaScript ho hloka litlhophiso tse boima tsa moaho mme hangata ho lebisa ho setaele se kopane ka mokhoa o sa thabiseng le component markup kapa HTML. Sebakeng sa ho nahanoa ka hloko ka ho reha mabitso, re lumella lisebelisoa tsa ho aha hore li re hlahisetse bakhethoa le li-identifier (mohlala, .jsx-3130221066), tse hlokang hore bahlahisi ba ikamahanye le puo e 'ngoe ea bohata ka boyona. (Joalokaha eka boima ba kelello ba ho utloisisa hore na tšebeliso ea karolo ea hau kaofela e ne e se e lekana!) Ho tsoelapele ho hlakola mosebetsi oa ho reha litlelase ho lithulusi ho bolela hore ho lokisa liphoso hangata ho tlamehile ho mefuta e itseng ea ts'ebeliso e hlophisitsoeng bakeng sa nts'etsopele, ho fapana le ho sebelisa likarolo tsa sebatli tse tšehetsang ho lokisa liphoso, joalo ka Lisebelisoa tsa Moqapi. Ho batla ho le joalo ka ha re hloka ho nts'etsapele lisebelisoa tsa ho lokisa lisebelisoa tseo re li sebelisang ho hlahisa seo webosaete e seng e fana ka sona - tsohle molemong oa ho baleha "bohloko" ba ho ngola CSS e tloaelehileng. Ka lehlohonolo, likarolo tsa sejoale-joale tsa CSS ha li etse feela hore mokhoa oa ho ngola oa CSS o feto-fetohe le maemo, empa hape o fa baetsi ba tšoanang le rona matla a mangata a ho laola cascade le ho re sebeletsa. CSS Cascade Layers ke mohlala o motle, empa ho na le tšobotsi e 'ngoe e hlokang tlhokomelo e makatsang - leha seo se ntse se fetoha kaha e sa tsoa fetoha Baseline e lumellanang. The CSS @scope At-Rule Ke nka CSS @scope at-rule e le pheko e ka bang teng bakeng sa mofuta oa matšoenyeho a bakoang ke mokhoa o lutlang oo re o koahetseng, o sa re qobelleng ho sekisetsa melemo ea sebaka sa marang-rang bakeng sa ho ikhula le lisebelisoa tse ling tsa ho aha. "The @scope CSS at-rule e o nolofalletsa ho khetha likarolo ho li-subtrees tse itseng tsa DOM, ho shebana le likarolo ka nepo ntle le ho ngola likhetho tse ikhethileng tseo ho leng thata ho li hlakola, ntle le ho hokahanya bakhethoa ba hau ka thata ho sebopeho sa DOM." - MDN.
Ka mantsoe a mang, re ka sebetsa ka mekhoa e ikhethileng maemong a itseng ntle le ho tela lefa, ho theola, kapa esita le karohano ea mantlha ea matšoenyeho.eo esale e le molao-motheo o tataisang oa tsoelopele ea pele. Ho feta moo, e na le tšireletso e ntle ea sebatli. Ebile, Firefox 146 e ekelitse tšehetso bakeng sa @scope ka December, ea etsa hore Baseline e tsamaisane le lekhetlo la pele. Papiso e bonolo ke ena lipakeng tsa konopo e sebelisang sebopeho sa BEM khahlano le molao oa @scope:
Molao oa @scope o lumella ho nepahala le ho rarahana ho fokolang. Moqapi ha a sa hloka ho theha meeli a sebelisa mabitso a sehlopha, ao, a ba lumellang ho ngola ba khethang ho latela likarolo tsa matsoalloa a HTML, ka hona a felisa tlhoko ea lipaterone tsa mabitso a sehlopha sa CSS. Ka ho tlosa feela tlhoko ea taolo ea mabitso a sehlopha, @scope e ka fokotsa tšabo e amanang le CSS mererong e meholo.
Tšebeliso ea Motheo
Ho qala, eketsa molao oa @scope ho CSS ea hau ebe o kenya mokhethoa oa motso hore na ho tla hlahlojoa mefuta efe:
@scope (< mokhethi>) {
/* Litaele tse fihletsoeng ho
Kahoo, ho etsa mohlala, haeba re ne re ka lekanya litaele ho karolo ea
@scope (nav) { a {/* Hokela mefuta ka har'a nav scope */}
a:e sebetsang {/* Mefuta e sebetsang ea lihokelo */ }
a:active::pele {/* Sehokelo se sebetsang le pseudo-element bakeng sa setaele se eketsehileng */}
@media (boholo ba bophara: 768px) { a {/* Liphetoho tse arabelang */} } }
Sena, ka bosona, ha se tšobotsi ea bohlokoa. Leha ho le joalo, khang ea bobeli e ka eketsoa sebakeng sa ho theha moeli o tlase, o hlalosang sebaka sa ho qala le ho qetela sa sebaka.
/* Ntho efe kapa efe e ka hare ho ul e ke ke ea ba le mekhoa e sebelisoang */ @scope (nav) ho ea ho (ul) { a { boholo ba fonte: 14px; } }
Mokhoa ona o bitsoa donut scoping, 'me ho na le mekhoa e mengata eo motho a ka e sebelisang, ho kenyelletsa le letoto la bakhethoa ba tšoanang, ba khethehileng haholo ba kopantsoeng ka thata le sebopeho sa DOM, e : eseng ea pseudo-sector, kapa ho abela mabitso a sehlopha ho likarolo tse ka hare ho
