Pe a aʻoaʻoina mataupu faavae o le CSS autu, e aʻoaʻoina se tasi e tusi sitaili faʻapitoa, toe faʻaaogaina, ma faʻamatalaga e faʻamautinoa ai le faʻaleleia. Ae a o'o ina a'afia tagata atia'e ma fa'aoga moni o le lalolagi, e masani ona lagona le le mafai ona fa'aopoopoina fa'aaliga UI e aunoa ma ni sitaili e tafe atu i vaega e le'i fa'amoemoeina. O lenei lomiga e masani ona oso i le kiona i totonu o se matasele e faamalieina ai oe lava; sitaili o loʻo faʻaogaina faʻapitoa i se tasi elemene poʻo se vasega e amata ona faʻaalia i mea e le o iai. O lenei mea e faʻamalosia ai le tagata faʻapipiʻi e faia ni filifiliga sili atu ona patino e faʻamalo ai sitaili liki, ona faʻafuaseʻi ai lea ona faʻaumatia sitaili o le lalolagi, ma isi. Fa'atonuga igoa o vasega, e pei o le BEM, o se tasi o fofo fa'apitoa i lenei mataupu. O le BEM (Block, Element, Modifier) methodology o se auala faʻapitoa e faʻaigoaina vasega CSS e faʻamautinoa ai le toe faʻaaogaina ma le fausaga i totonu o faila CSS. O le fa'aigoaina o fa'aupuga fa'apenei e mafai ona fa'aitiitia ai le mamafa o le mafaufau e ala i le fa'aogaina o le gagana e fa'amatala ai elemene ma lo latou tulaga, ma afai e fa'atino sa'o, e mafai ona fa'afaigofie ona tausia sitaili mo fa'aoga tetele. I le lalolagi moni, e ui i lea, e le o taimi uma e galue ai faapena. E mafai ona suia mea e ave i ai le faamuamua, ma faatasi ai ma suiga, o le faatinoga e le ogatasi. O suiga laiti i le fausaga HTML e mafai ona mana'omia ai le tele o suiga ole igoa ole vasega CSS. Faatasi ai ma le tele o fesoʻotaʻiga pito i luma o talosaga, o igoa o le vasega e mulimuli i le BEM mamanu e mafai ona umi ma faigata (faʻataʻitaʻiga, app-user-overview__status--is-authenticating), ma le le usitaʻia atoatoa o tulafono faʻaigoaina e malepe ai le fausaga o le faiga, ma faʻafefe ai ona aoga. Ona o nei luʻitau, e le o se mea e ofo ai le liliu atu o le au atinaʻe i faʻatulagaga, Tailwind o le sili ona lauiloa CSS faʻavae. Nai lo le taumafai e tau le mea e foliga mai o se taua faʻapitoa e le mafai ona manumalo i le va o sitaili, e sili atu ona faigofie le tuʻuina atu i luga o le CSS Cascade ma faʻaoga meafaigaluega e faʻamaonia ai le vavae ese atoatoa. E fa'alagolago tele le au atia'e i mea faigaluega E fa'afefea ona tatou iloa o nisi tagata atia'e o lo'o naunau e aloese mai sitaili fa'asolo? O le tulaʻi mai o meafaigaluega pito i luma o le "faʻaonaponei" - pei o le CSS-in-JS frameworks - ua mamanuina faʻapitoa mo lena faʻamoemoe. O le galulue fa'atasi ma sitaili tu'ufua e va'ava'ai i vaega fa'apitoa e mafai ona foliga mai o se manava fou. E aveesea ai le manaʻoga e taʻu igoa - o se tasi lea o galuega pito i luma e sili ona inosia ma faʻaalu taimi - ma faʻatagaina le au atiaʻe e fua mai e aunoa ma le malamalama atoatoa pe faʻaaogaina le aoga o le tofi CSS. Ae o le lafoaia o le CSS Cascade e sau ma ona lava faafitauli. Mo se fa'ata'ita'iga, o le fatuina o sitaili i le JavaScript e mana'omia ai ni fa'atonuga mamafa ma e masani ona ta'ita'i atu i sitaili e fefiloi fa'atasi ma vaega fa'ailoga po'o le HTML. Nai lo le iloiloina ma le toto'a o le fa'aigoaina o feagaiga, matou te fa'ataga le fau o meafaigaluega e fa'a-autometi ai tagata filifilia ma fa'ailoa mo i matou (fa'ata'ita'iga, .jsx-3130221066), e mana'omia ai le au atia'e e fa'aauau pea le isi gagana fa'afoliga i totonu ma ia lava. (E pei e leʻi lava le mamafa o le malamalama i mea uma o loʻo faʻaaogaina e lau vaega!) O le fa'avasegaina atili o le galuega o le fa'aigoaina o vasega i mea faigaluega o lona uiga o le fa'aogaina o le fa'avae e masani ona fa'atumauina i fa'amatalaga fa'apitoa o lo'o tu'ufa'atasia mo le atina'e, nai lo le fa'aogaina o mea fa'apitoa ole su'esu'ega e lagolagoina ai le debugging ola, pei ole Developer Tools. E toetoe lava a manaʻomia le atinaʻeina o meafaigaluega e faʻapipiʻi ai meafaigaluega o loʻo matou faʻaogaina e faʻamalamalamaina ai mea ua uma ona saunia e le upegatafaʻilagi - o mea uma mo le manuia o le sola ese mai le "tiga" o le tusiaina o le CSS masani. O le mea e laki ai, o foliga fa'aonaponei o le CSS e le gata ina sili atu ona fetu'una'i le tusiaina o le CSS masani ae e tu'uina atu ai fo'i i le au atina'e pei oi tatou le malosi sili atu e fa'atautaia ai le cascade ma fa'aoga mo i tatou. CSS Cascade Layers o se faʻataʻitaʻiga sili, ae o loʻo i ai se isi faʻaaliga e maua ai se mea e ofo ai le leai o se faʻalogo - e ui o lea ua suia i le taimi nei talu ai nei ua fetaui ma Baseline. O le CSS @scope At-Rule Ou te manatu o le CSS @scope at-rule e avea o se fofo talafeagai mo le ituaiga o sitaili-leak-faaosofia popolega ua tatou ufiufi, o se tasi e le faamalosia ai i tatou e fetuutuunai tulaga lelei i luga o le upega tafaʻilagi mo le faʻaogaina ma isi meafaigaluega faufale. "O le @scope CSS at-rule e mafai ai e oe ona filifili elemene i lalo o le DOM subtrees, faʻatatau saʻo elemene e aunoa ma le tusiaina o ni filifiliga faʻapitoa e faigata ona faʻafefe, ma e aunoa ma le faʻapipiʻiina o au tagata filifilia i le fausaga o le DOM." - MDN
I se isi faaupuga, e mafai ona tatou galulue faʻatasi ma sitaili tuʻufua i tulaga faʻapitoa e aunoa ma le ositaulagaina o le tofi, faʻasolosolo, poʻo le tuʻueseeseina o popolega.o se ta'iala ta'iala umi lea o le atina'e pito i luma. E le gata i lea, o loʻo i ai se faʻasalalauga lelei tele. O le mea moni, Firefox 146 faʻaopoopo le lagolago mo @scope ia Tesema, ma faʻaogaina le Baseline mo le taimi muamua. O se faʻatusatusaga faigofie lea i le va o se faʻamau e faʻaaoga ai le BEM mamanu ma le tulafono @scope:
Ole tulafono @scope e mafai ai ona saʻo ma itiiti le lavelave. E le toe manaʻomia e le tagata faʻapipiʻi ona faia ni tuaoi e faʻaaoga ai igoa o vasega, lea, i le isi itu, e mafai ai ona latou tusia ni tagata filifilia e faʻavae i luga o elemene HTML masani, ma faʻaumatia ai le manaʻoga mo faʻasologa o igoa CSS vasega. I le na o le aveesea o le manaʻoga mo le puleaina o igoa o le vasega, @scope e mafai ona faʻaitiitia le fefe e fesoʻotaʻi ma le CSS i galuega tetele.
Fa'aoga Fa'avae
Ina ia amata, faʻaopoopo le tulafono @scope i lau CSS ma faʻapipiʻi se aʻa filifilia o le a faʻaogaina ai sitaili:
@scope (
O lea, mo se faʻataʻitaʻiga, afai tatou te faʻaogaina sitaili i se
@scope (nav) { a { /* So'oga sitaili i totonu o le nav scope */ }
a:aga { /* Sitaili feso'ota'iga */ }
a:active::muamua { /* So'otaga fa'agaioiga ma pseudo-element mo le fa'asili fa'aopoopo */ }
@media (tele-lautele: 768px) { a { /* fetuutuunaiga tali */ } } }
O lenei mea, na o ia lava, e le o se mea e suatia ai le eleele. Ae ui i lea, o se finauga lona lua e mafai ona faʻaopoopo i le lautele e fausia ai se tuaoi maualalo, faʻamalamalama lelei le amataga ma le faʻaiʻuga.
/* So'o se elemene i totonu ole ul o le a le fa'aogaina sitaili */ @scope (nav) i le (ul) { a { mata'itusi-tele: 14px; } }
O lenei faiga e taʻua o le donut scoping, ma e tele auala e mafai ona faʻaogaina e se tasi, e aofia ai se faasologa o filifiliga tutusa, sili ona patino e faʻapipiʻi faʻatasi i le fausaga o le DOM, a: e le o se pseudo-selector, poʻo le tuʻuina atu o igoa o vasega i elemene i totonu o le
Fa'ai'uga Utility-first CSS frameworks, e pei ole Tailwind, e aoga lelei mo faʻataʻitaʻiga ma galuega laiti. O latou faʻamanuiaga e vave faʻaitiitia, peitaʻi, pe a faʻaaogaina i galuega tetele e aofia ai le sili atu nai lo le au atinaʻe. O le atinaʻe pito i luma ua faʻateleina le faʻalavelave i nai tausaga talu ai, ma o le CSS e le o se faʻalavelave. E ui o le @scope tulafono e le o se fofo-uma, e mafai ona faʻaitiitia ai le manaʻomia mo meafaigaluega faigata. A fa'aoga i le tulaga o, po'o fa'atasi ma ta'iala fa'aigoaina vasega, @scope e mafai ona fa'afaigofie ma sili atu le malie e tusi ai le CSS fa'atumauina. Faitau atili
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Firefox 146 Fa'amatalaga Fa'amatalaga (Firefox) Lagolago Su'esu'e (CanIUse) Ta'iala CSS lauiloa (Setete o CSS 2024) “O le “C” ile CSS: Cascade”, Thomas Yip (CSS-Tricks) BEM Folasaga (Maua BEM)
