I te wa e ako ana i nga maataapono o te CSS taketake, ka akohia tetahi ki te tuhi i nga momo tauira, ka taea te whakamahi ano, me te whakamaarama hei whakarite kia mau tonu. Engari i te wa e uru ana nga kaiwhakawhanake ki nga tono o te ao, kare e taea te taapiri i nga ahuatanga UI me te kore e rere nga momo ki nga waahi kore. He maha nga wa ka uru tenei putanga ki roto i te riipene whakakii-whaiaro; Ko nga momo kaaahua kua horahia ki tetahi huānga, karaehe ranei ka timata ki te puta ki te waahi ehara i a raatau. Na tenei ka kaha te kaiwhakawhanake ki te hanga i nga kaikowhiri motuhake ake ki te turaki i nga momo kua patai, katahi ka takahia nga momo o te ao, me era atu. Ko nga tikanga ingoa karaehe maataki, penei i te BEM, tetahi o nga otinga whakaaro mo tenei take. Ko te tikanga BEM (Poraka, Huanga, Whakarerekē) he huarahi nahanaha ki te whakaingoa i nga karaehe CSS hei whakarite i te whakamahinga me te hanganga i roto i nga konae CSS. Ko te whakaingoatanga o nga tikanga penei ka whakaiti i te kawenga hinengaro ma te whakamahi i te reo rohe ki te whakaahua i nga huānga me o raatau ahuatanga, a, ki te tika te whakatinana, ka ngawari ake te pupuri i nga momo tono nui. I roto i te ao mau, heoi, kaore i te rite tonu te mahi. Ka taea te huri i nga kaupapa matua, me te huringa, ka kore e rite te whakatinanatanga. Ko nga huringa iti ki te hanganga HTML ka hiahia kia maha nga whakarereketanga ingoa akomanga CSS. Ma nga tono-mutunga tino tauwhitiwhiti, ko nga ingoa o te akomanga e whai ana i te tauira BEM ka roa, ka kahakore (hei tauira, app-user-overview__status--is-authenticating), me te kore e tino piri ki nga ture whakaingoa ka pakaru te hanganga o te punaha, na reira ka whakakore i ona painga. I runga i enei wero, ehara i te mea miharo kua huri nga kaihanga ki nga anga, ko Tailwind te anga CSS tino rongonui. Engari i te ngana ki te whawhai i te ahua o te pakanga motuhake e kore e taea te wikitoria i waenga i nga momo, he maamaa ake te whakarere i te CSS Cascade me te whakamahi i nga taputapu hei whakapumau i te wehenga. Ko nga Kaihanga Whakawhanake e Hia Ana Mo Nga Taputapu Me pehea tatou e mohio ai kei te pirangi etahi kaiwhakawhanake ki te karo i nga momo putu? Ko te pikinga o nga taputapu "hou" o mua - penei i nga anga CSS-in-JS - i hangaia mo taua kaupapa. Ko te mahi me nga momo taratahi e piri ana ki nga waahanga motuhake ka rite ki te hau hou. Ka whakakorehia te hiahia ki te whakaingoa i nga mea - ko tetahi tonu o nga mahi tino kino me te whakapau i te waa - ka taea e nga kaiwhakawhanake te whai hua me te kore e tino mohio ki te whakamahi ranei i nga painga o te tuku iho CSS. Engari ko te whakakore i te CSS Cascade ka tae mai me ona ake raru. Hei tauira, ko te tito kāhua i roto i te JavaScript e hiahia ana ki nga whirihoranga hanga taumaha, a he maha nga wa e arai atu ai ki nga momo ahua e tuitui ana ki te tohu wae, HTML ranei. Engari i te ata whakaaro ki nga tikanga whakaingoa, ka whakaaehia e matou te hanga taputapu ki te whakaputa aunoa i nga kaiwhiriwhiri me nga tohu tohu mo matou (hei tauira, .jsx-3130221066), me whai tonu nga kaiwhakawhanake ki tetahi atu reo pseudo i roto i a ia ano. (Mehemea kaore i ranea te taumahatanga o te mohio ki nga mahi a to waahanga katoa!) Ko te tango i nga mahi o te whakaingoa i nga karaehe ki te taputapu ko te tikanga ko te patuiro taketake ka herea ki nga putanga tono motuhake kua whakahiatohia mo te whanaketanga, kaua ki te whakamahi i nga ahuatanga tirotiro taketake e tautoko ana i te patuiro ora, penei i nga Utauta Kaiwhakawhanake. He rite tonu ki te whakawhanake taputapu ki te patuiro i nga taputapu e whakamahia ana e matou ki te tango i nga mea kua tukuna e te paetukutuku - he mea katoa mo te rere atu i te "mamae" o te tuhi CSS paerewa. Waimarie, ko nga ahuatanga CSS hou ehara i te mea ka ngawari ake te tuhi CSS paerewa engari ka nui ake te mana ki nga kaiwhakawhanake penei i a matou ki te whakahaere i te riipene me te mahi ma matou. Ko te CSS Cascade Layers he tauira pai, engari tera ano tetahi ahuatanga e kore e aro nui - ahakoa kei te huri ke inaianei kua hototahi ki te Raina turanga. Ko te CSS @scope At-Rule Ki taku whakaaro ko te CSS @scope at-rule he rongoa pea mo te ahua o te ahua-leak-induced awangawanga kua hipokina e matou, tetahi e kore e kaha ki te whakararu i nga painga o te paetukutuku taketake mo nga tangohanga me etahi atu taputapu hanga. "Ma te @scope CSS at-rule ka taea e koe te kowhiri i nga huānga i roto i nga rakau-iti DOM motuhake, e aro tika ana ki nga huānga me te kore e tuhi i nga kaiwhiriwhiri tino-motuhake he uaua ki te takahi, me te kore e honoa o kaiwhiriwhiri ki te hanganga DOM." - MDN
I etahi atu kupu, ka taea e tatou te mahi me nga momo taratahi i roto i nga waa motuhake me te kore e patu i nga taonga tuku iho, te whakaheke, tae noa ki te wehenga taketake o nga awangawanga.he maataapono arataki tera mo te whanaketanga o mua. I tua atu, he pai te kapi tirotiro tirotiro. Inaa, kua taapirihia e Firefox 146 te tautoko mo te @scope i te Hakihea, kia hototahi ki te Raina mo te wa tuatahi. Anei he whakataurite ngawari i waenga i te paatene ma te whakamahi i te tauira BEM ki te ture @scope:
Ko te ture @scope ka taea te tika me te iti ake te uaua. Ko te kaiwhakawhanake kaore e hiahia ki te hanga rohe ma te whakamahi i nga ingoa karaehe, na, ka taea e ratou te tuhi i nga kaiwhiriwhiri i runga i nga waahanga HTML taketake, na reira ka whakakorehia te hiahia mo nga tauira ingoa o te akomanga CSS. Ma te tango noa i te hiahia mo te whakahaere ingoa akomanga, ka taea e @scope te whakaiti i te wehi e pa ana ki te CSS i roto i nga kaupapa nui.
Whakamahi Taketake
Hei timata, taapirihia te ture @scope ki to CSS me te whakauru i te kaikowhiri pakiaka ki nga momo ka horahia:
@scope (
No reira, hei tauira, mena ka whaaia e tatou nga momo momo ki tetahi huānga
@scope (nav) { a { /* Ngā kāhua hono i roto i te hōkai whakatere */ }
a:active { /* Ngā kāhua hono hohe */ }
a:active::i mua i { /* Hononga hohe me te huānga pseudo mo te hanga taapiri */ }
@media (mrahi-whanui: 768px) { a { /* Whakatikatika urupare */ } } }
Ko tenei, i runga i tona ake, ehara i te mea he kaupapa pakaru. Heoi, ka taea te taapiri atu i te tohenga tuarua ki te whaanui ki te hanga i tetahi rohenga iti ake, me te tautuhi tika i nga timatanga me nga pito mutunga o te whaanui.
/* Ko nga huānga kei roto i te ul karekau e whai momo ahua */ @scope (nav) ki (ul) { a { momotuhi-rahi: 14px; } }
Ko tenei tikanga ka kiia ko te karawhiu kai, he maha nga huarahi ka taea e te tangata te whakamahi, tae atu ki te raupapa o nga kaikowhiri rite, tino motuhake kua honoa ki te hanganga DOM, he : kauaka pseudo-selector, he tohu ingoa akomanga motuhake ranei ki huānga i roto i te
Whakamutunga Ko nga anga CSS-tuatahi, penei i a Tailwind, he pai te mahi mo te tauira tauira me nga kaupapa iti ake. Ka iti haere o raatau painga, engari, ka whakamahia i roto i nga kaupapa nui ake e uru atu ana ki nga kaiwhakawhanake tokorua. Ko te whakawhanaketanga o mua kua kaha ake te uaua i roto i nga tau kua pahure ake nei, a ko te CSS kaore he rereke. Ahakoa ko te ture @scope ehara i te rongoa-katoa, ka taea te whakaiti i te hiahia mo nga taputapu uaua. Ina whakamahia hei whakakapi, i te taha ranei o te ingoa o te akomanga rautaki, ka taea e @scope te ngawari me te ngahau ki te tuhi CSS ka taea. Panuitanga Atu
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Firefox 146 Release Notes (Firefox) Tautoko Pūtirotiro (CanIUse) Anga CSS rongonui (State of CSS 2024) "Ko te "C" i roto i te CSS: Cascade", Thomas Yip (CSS-Tricks) BEM Introduction (Tikina BEM)
