I ke aʻo ʻana i nā loina o CSS kumu, ua aʻo ʻia kekahi e kākau i nā ʻano modular, hoʻohana hou ʻia, a me nā wehewehe wehewehe e hōʻoia i ka mālama ʻana. Akā i ka wā e komo ai nā mea hoʻomohala me nā noi honua maoli, manaʻo pinepine ʻia ʻaʻole hiki ke hoʻohui i nā hiʻohiʻona UI me ka ʻole o nā ʻano e kahe ana i nā wahi i manaʻo ʻole ʻia. Hoʻopili pinepine ʻia kēia pilikia i loko o kahi loop hoʻokō ponoʻī; ʻO nā ʻano i hoʻopaʻa ʻia i ka manaʻo i hoʻokahi mea a i ʻole papa e hoʻomaka e hōʻike i kahi ʻaʻole lākou. Hoʻoikaika kēia i ka mea hoʻomohala e hana i nā mea koho kikoʻī hou aʻe e hoʻopau i nā ʻano leaked, a laila hoʻopau i nā ʻano honua, a pēlā aku. ʻO nā hui inoa papa koʻikoʻi, e like me BEM, kahi hoʻonā manaʻo no kēia pilikia. ʻO ke ʻano BEM (Block, Element, Modifier) kahi ala ʻōnaehana o ka inoa ʻana i nā papa CSS e hōʻoia i ka hoʻohana hou ʻana a me ke kūkulu ʻana i loko o nā faila CSS. Hiki i ka inoa ʻana i nā ʻaha kūkā e like me kēia ke hōʻemi i ka haʻahaʻa cognitive ma o ka hoʻohana ʻana i ka ʻōlelo domain e wehewehe i nā mea a me ko lākou mokuʻāina, a inā hoʻokō pololei, hiki ke maʻalahi ka mālama ʻana i nā ʻano no nā noi nui. I ka honua maoli, akā naʻe, ʻaʻole ia e hana i kēlā me kēia. Hiki ke hoʻololi nā mea nui, a me ka hoʻololi ʻana, lilo ka hoʻokō ʻana i mea like ʻole. Hiki i nā hoʻololi liʻiliʻi i ka hoʻolālā HTML ke koi i nā hoʻoponopono inoa papa CSS he nui. Me nā palapala noi mua loa, hiki i nā inoa papa ma muli o ke ʻano BEM ke lilo i lōʻihi a paʻakikī (e laʻa, app-user-overview__status--is-authenticating), a ʻaʻole i pili pono i nā lula inoa e uhaʻi i ke ʻano o ka ʻōnaehana, a laila e hōʻole i kāna mau pono. Hāʻawi ʻia i kēia mau pilikia, ʻaʻole ia he mea kupanaha ua huli nā mea hoʻomohala i nā frameworks, ʻo Tailwind ka mea kaulana loa CSS framework. Ma mua o ka hoʻāʻo ʻana e hakakā i ka mea i manaʻo ʻia he kaua kikoʻī hiki ʻole ke lanakila ma waena o nā ʻano, ʻoi aku ka maʻalahi o ka haʻalele ʻana i ka CSS Cascade a hoʻohana i nā mea hana e hōʻoiaʻiʻo ai i ka noho kaʻawale. Manaʻo hou nā mea hoʻomohala i nā pono hana Pehea mākou e ʻike ai ua makemake kekahi mau mea hoʻomohala e pale i nā ʻano cascaded? ʻO ia ka piʻi ʻana o nā mea hana mua "hou" - e like me CSS-in-JS frameworks - i hoʻolālā ʻia no kēlā kumu. ʻO ka hana ʻana me nā ʻano kaʻawale i paʻa paʻa i nā ʻāpana kikoʻī e like me ka hanu o ka ea hou. Hoʻopau ia i ka pono e kapa inoa i nā mea - ʻo ia kekahi o nā hana mua loa a hoʻopau i ka manawa - a hiki i nā mea hoʻomohala ke hoʻohua me ka ʻole o ka hoʻomaopopo ʻana a i ʻole ka hoʻohana ʻana i nā pono o ka hoʻoilina CSS. Akā ʻo ka haʻalele ʻana i ka CSS Cascade e hele mai me kāna mau pilikia ponoʻī. No ka laʻana, ʻo ka haku ʻana i nā kaila ma JavaScript e koi i nā hoʻonohonoho hoʻonohonoho koʻikoʻi a alakaʻi pinepine i nā kaila i hui pū ʻia me ka markup a i ʻole HTML. Ma kahi o ka noʻonoʻo pono ʻana i ka inoa ʻana, ʻae mākou i ke kūkulu ʻana i nā mea hana no ka hoʻokumu ʻana i nā mea koho a me nā mea hōʻike no mākou (e laʻa. (Me he mea lā ʻaʻole lawa ka haʻahaʻa noʻonoʻo o ka hoʻomaopopo ʻana i nā mea a pau āu e hoʻohana ai i nā hopena!) ʻO ka wehe hou ʻana i ka hana o ka hoʻopaʻa inoa ʻana i nā papa i ka mea paahana, ʻo ia ka mea e koi pinepine ʻia ka debugging kumu i nā mana noi kikoʻī i hōʻuluʻulu ʻia no ka hoʻomohala ʻana, ma mua o ka hoʻohana ʻana i nā hiʻohiʻona ʻōiwi maoli e kākoʻo ana i ka debugging ola, e like me Developer Tools. Me he mea lā e pono ai mākou e hoʻomohala i nā mea hana e hoʻopau ai i nā mea hana a mākou e hoʻohana nei e hoʻokaʻawale i nā mea i hāʻawi ʻia e ka pūnaewele - nā mea āpau no ka holo ʻana mai ka "ʻeha" o ke kākau ʻana i ka CSS maʻamau. ʻO ka mea pōmaikaʻi, ʻaʻole wale nā hiʻohiʻona CSS hou e maʻalahi i ka kākau ʻana i ka CSS maʻamau akā hāʻawi pū i nā mea hoʻomohala e like me mākou i ka mana nui e hoʻokele i ka cascade a hana ia no mākou. He hiʻohiʻona maikaʻi loa nā CSS Cascade Layers, akā aia kekahi hiʻohiʻona e loaʻa ai ka hemahema o ka nānā ʻana - ʻoiai ke loli nei i kēia manawa ua lilo ia i kūpono i ka Baseline. ʻO ka CSS @scope At-Rule Manaʻo wau i ka CSS @scope at-rule he lāʻau lapaʻau kūpono no ke ʻano o ka hopohopo i hoʻokomo ʻia i ka style-leak-induced a mākou i uhi ai, kahi mea ʻaʻole e koi iā mākou e hoʻololi i nā pono pūnaewele maoli no nā abstractions a me nā mea hana hou. "ʻO ka @scope CSS at-rule hiki iā ʻoe ke koho i nā mea i loko o nā kumulāʻau DOM kikoʻī, e kuhikuhi pono ana i nā mea me ka kākau ʻole ʻana i nā mea koho kikoʻī nui loa i paʻakikī ke kāpae ʻia, a me ka hoʻopili ʻole ʻana i kāu mau mea koho i ka hoʻolālā DOM." - MDN
I nā huaʻōlelo ʻē aʻe, hiki iā mākou ke hana me nā ʻano kaʻawale i nā manawa kikoʻī me ka ʻole o ka mōhai ʻana i ka hoʻoilina, cascading, a i ʻole ka hoʻokaʻawale kumu o nā hopohopo.ʻo ia ke kumu alakaʻi lōʻihi o ka hoʻomohala ʻana i mua. Eia kekahi, loaʻa iā ia ka uhi polokalamu kele maikaʻi. I ka ʻoiaʻiʻo, ua hoʻohui ʻo Firefox 146 i ke kākoʻo no @scope i Dekemaba, e hoʻohālikelike ai i ka Baseline no ka manawa mua. Eia kahi hoʻohālikelike maʻalahi ma waena o kahi pihi e hoʻohana ana i ke ʻano BEM me ke kānāwai @scope:
<ʻano> .button .button__text { /* pihi kikokikona kaila */ } .button .button__icon { /* pihi icon styles */ } .button--primary { nā kāhua pihi mua */ }
<ʻano> @scope (.primary-button) { span:keiki-mua { /* pihi kikokikona kaila */ } span: keiki hope { /* kaila ikona pihi */ } }
Hiki i ka lula @scope ke pololei me ka liʻiliʻi liʻiliʻi. ʻAʻole pono ka mea hoʻomohala e hana i nā palena me ka hoʻohana ʻana i nā inoa papa, ʻo ia hoʻi, e ʻae iā lākou e kākau i nā mea koho e pili ana i nā mea HTML maoli, a laila e hoʻopau i ka pono no nā papa inoa papa CSS prescriptive. Ma ka wehe wale ʻana i ka pono o ka hoʻokele inoa papa, hiki i ka @scope ke hoʻopau i ka makaʻu e pili ana me CSS i nā papahana nui.
Hoohana Kumu
No ka hoʻomaka ʻana, hoʻohui i ka lula @scope i kāu CSS a hoʻokomo i kahi koho kumu i kahi e hoʻopili ʻia ai nā ʻano:
@pae (
No laila, no ka laʻana, inā mākou e hoʻopili i nā ʻano i kahi
@scope (nav) { a { /* Nā kaila loulou i loko o ka laulā nav */ }
a:active { /* Nā kaila loulou hoʻoikaika */ }
a:active::before { /* Loulou hoʻoikaika me ka pseudo-element no ke kaila hou */ }
@media (nui-ākea: 768px) { a { /* Nā hoʻololi pane */ } } }
ʻO kēia, ma kāna iho, ʻaʻole ia he hiʻohiʻona groundbreaking. Eia nō naʻe, hiki ke hoʻohui ʻia kahi hoʻopaʻapaʻa ʻelua i ke ākea e hana i kahi palena haʻahaʻa, e wehewehe pono ana i ka hoʻomaka a me ka hopena o ka pae.
/* ʻAʻole e hoʻohana ʻia nā ʻano i loko o ka ul */ @scope (nav) i (ul) { a { ka nui kikokikona: 14px; } }
Kapa ʻia kēia hana ʻo donut scoping, a he nui nā ala e hiki ai ke hoʻohana, me kahi pūʻulu o nā mea koho like a kikoʻī loa i hui pū ʻia me ka hoʻolālā DOM, kahi: ʻaʻole pseudo-selector, a i ʻole ka hāʻawi ʻana i nā inoa papa kikoʻī i nā mea i loko o ka
Ka hopena Hoʻohana maikaʻi nā ʻōnaehana CSS pono-mua, e like me Tailwind, no ka prototyping a me nā papahana liʻiliʻi. E emi koke ko lākou mau pōmaikaʻi, akā naʻe, ke hoʻohana ʻia i nā papahana nui e pili ana i nā mea hoʻomohala ʻelua. Ua lilo ka hoʻomohala ʻana i mua i ka paʻakikī i nā makahiki i hala iho nei, a ʻaʻole ʻokoʻa ka CSS. ʻOiai ʻaʻole he lāʻau lapaʻau ka @scope rule, hiki iā ia ke hōʻemi i ka pono o nā mea hana paʻakikī. Ke hoʻohana ʻia ma kahi o, a i ʻole ma ka ʻaoʻao o ka inoa papa hoʻolālā, hiki i ka @scope ke maʻalahi a me ka leʻaleʻa e kākau i ka CSS mālama. Heluhelu hou
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Nā memo hoʻokuʻu ʻo Firefox 146 (Firefox) Kākoʻo Pūnaewele (CanIUse) Nā Kūlana CSS kaulana (State of CSS 2024) "ʻO ka "C" ma CSS: Cascade", Thomas Yip (CSS-Tricks) Hoʻolauna BEM (E kiʻi iā BEM)
