Oinarrizko CSSren printzipioak ikastean, estilo modularrak, berrerabilgarriak eta deskribatzaileak idazten irakasten da, mantentzea bermatzeko. Baina garatzaileek mundu errealeko aplikazioetan parte hartzen dutenean, askotan ezinezkoa da UI ezaugarriak gehitzea estiloak nahi gabeko eremuetara isuri gabe. Gai hau askotan elur-bolak bere burua betetzen duen begizta batean sartzen da; Teorikoki elementu edo klase bati dagozkion estiloak ez dagokien lekuan agertzen hasten dira. Horrek garatzailea behartzen du hautatzaile zehatzagoak sortzera, filtratutako estiloak gainidazteko, gero ustekabean estilo globalak gainidazteko, eta abar. Klase izenen konbentzio zurrunak, BEM adibidez, arazo honen irtenbide teoriko bat dira. BEM (Block, Element, Modifier) metodologia CSS klaseak izendatzeko modu sistematikoa da, CSS fitxategien barruan berrerabilgarritasuna eta egitura bermatzeko. Horrelako izendatze-konbentzioek karga kognitiboa murriztu dezakete elementuak eta haien egoera deskribatzeko domeinu-lengoaia aprobetxatuz, eta behar bezala inplementatzen badira, aplikazio handietarako estiloak erraztu ditzakete mantentzea. Mundu errealean, ordea, ez da beti horrela funtzionatzen. Lehentasunak alda daitezke, eta aldaketarekin, ezarpena koherentea bihurtzen da. HTML egituran aldaketa txikiek CSS klase-izenen berrikuspen asko eska ditzakete. Frontend-aplikazio oso interaktiboekin, BEM ereduari jarraitzen dioten klase-izenak luzeak eta zailak izan daitezke (adibidez, app-user-overview__status--is-authentiting) eta izendapen-arauei guztiz ez atxikitzeak sistemaren egitura hautsi egiten du, eta, ondorioz, onurak ezeztatzen ditu. Erronka hauek ikusita, ez da harritzekoa garatzaileek esparruetara jo izana, Tailwind CSS esparru ezagunena izanik. Estiloen arteko espezifikotasun-gerra irabazi ezinezkoa dirudienari aurre egiten saiatu beharrean, errazagoa da CSS Cascaderi uko egitea eta erabateko isolamendua bermatzen duten tresnak erabiltzea. Garatzaileek erabilgarritasunei buruz gehiago ematen dute Nola dakigu garatzaile batzuk kaskadako estiloak saihesteko gogotsu daudela? Frontend tresna "modernoen" gorakada da - CSS-in-JS esparruak bezalakoak - horretarako bereziki diseinatua. Osagai espezifikoetara oso hedatuta dauden estilo isolatuekin lan egitea haize freskoa dirudi. Gauzak izendatzeko beharra kentzen du - oraindik frontend-eko zeregin gorrotatuenetakoa eta denbora gehien hartzen duena - eta garatzaileei produktiboa izatea ahalbidetzen die CSS herentziaren onurak guztiz ulertu edo aprobetxatu gabe. Baina CSS Cascade baztertzea bere arazoekin dator. Esate baterako, JavaScript-en estiloak konposatzeak konfigurazio astunak behar ditu eta askotan osagaien markaketa edo HTML-ekin nahasten diren estiloak ekartzen ditu. Izen-konbentzioak arreta handiz aztertu beharrean, hautatzaileak eta identifikatzaileak automatikoki sortzeko tresnak eraikitzeko aukera ematen diegu (adibidez, .jsx-3130221066), garatzaileek beste sasi-hizkuntza batekin jarraitu behar dutela berez. (Zure osagai guztien erabileraEfektuek zer egiten duten ulertzeko karga kognitiboa nahikoa ez balitz bezala!) Klaseak izendatzeko lana tresnei gehiago abstraitzeak esan nahi du oinarrizko arazketa sarritan garatzeko konpilatutako aplikazio-bertsio zehatzetara mugatzen dela, zuzeneko arazketa onartzen duten nabigatzailearen funtzioak aprobetxatu beharrean, garatzaileentzako tresnak adibidez. Ia sareak ematen duenari abstraitzeko erabiltzen ari garen tresnak arazteko tresnak garatu beharko genituzkeela dirudi, hori guztia CSS estandarra idaztearen "minetik" ihes egiteko. Zorionez, CSS funtzio modernoek CSS estandarra idaztea malguagoa izateaz gain, gu bezalako garatzaileei ahalmen handiago ematen diete kaskada kudeatzeko eta guretzat funtziona dezan. CSS Cascade Layers adibide bikaina da, baina bada arreta falta harrigarria lortzen duen beste eginbide bat, nahiz eta hori aldatzen ari den orain dela gutxi Baseline bateragarria bihurtu da. CSS @scope At-Rule CSS @scope at-rule estali dugun estilo-filtrazioek eragindako antsietate motaren sendabide potentziala dela uste dut, abstrakzioak eta eraikuntza-tresnetarako jatorrizko web abantailak arriskuan jartzera behartzen ez gaituena. "@scope CSS at-arauak aukera ematen dizu DOM azpizuhaitz espezifikoetako elementuak hautatzeko, elementuak zehatz-mehatz bideratuz gainidazteko zailak diren hautatzaile espezifikoegiak idatzi gabe eta zure hautatzaileak DOM egiturarekin estuegi lotu gabe." - MDN
Beste era batera esanda, estilo isolatuekin lan egin dezakegu kasu zehatzetan, herentziari, kaskadari edo kezkak oinarrizko bereizketari uko egin gabe.hori izan da front-end garapenaren printzipio gidari luzea. Gainera, arakatzailearen estaldura bikaina du. Izan ere, Firefox 146-k @scope-rako laguntza gehitu zuen abenduan, Baseline bateragarri bihurtuz lehen aldiz. Hona hemen BEM eredua erabiltzen duen botoi baten arteko konparaketa sinplea eta @scope araua:
@scope arauak konplexutasun gutxiagorekin zehaztasuna ahalbidetzen du. Garatzaileak jada ez ditu mugak sortu behar klase-izenak erabiliz, eta horrek, aldi berean, jatorrizko HTML elementuetan oinarritutako hautatzaileak idazteko aukera ematen die, eta, ondorioz, CSS klase-izen eredu preskribatzaileen beharra ezabatzen du. Klase-izenen kudeaketaren beharra kenduz, @scope-k CSS-rekin lotutako beldurra arin dezake proiektu handietan.
Oinarrizko Erabilera
Hasteko, gehitu @scope araua zure CSS-ra eta txertatu erro-hautatzaile bat zein estilotan erabiliko diren:
@esparrua (
Beraz, adibidez, estiloak
@esparrua (nabigazioa) { a { /* Estekatu estiloak nabigazio esparruan */ }
a:active { /* Esteka estilo aktiboak */ }
a:active::before { /* Esteka aktiboa sasi-elementuarekin estilo gehigarrirako */ }
@media (gehienezko zabalera: 768 px) { a { /* Erantzunzko doikuntzak */ } } }
Hau, berez, ez da ezaugarri berritzaile bat. Hala ere, bigarren argumentu bat gehi daiteke esparruari beheko muga bat sortzeko, esparruaren hasierako eta amaierako puntuak modu eraginkorrean definituz.
/* ul barruko edozein elementuk ez du estilorik aplikatuko */ @scope (nav) to (ul) { a { letra-tamaina: 14px; } }
Praktika honi donut-esparrua deitzen zaio, eta erabil litezkeen hainbat hurbilketa daude, besteak beste, DOM egiturari hertsiki lotutako hautatzaile antzeko eta oso espezifikoak, :not pseudo-hautatzaile bat edo
/*
Ondorioa Utility lehen CSS esparruak, hala nola, Tailwind, ondo funtzionatzen dute prototipoak egiteko eta proiektu txikiagoetarako. Haien onurak azkar gutxitzen dira, ordea, garatzaile pare bat baino gehiagok parte hartzen duten proiektu handietan erabiltzen direnean. Frontend garapena gero eta konplikatuagoa bihurtu da azken urteotan, eta CSS ez da salbuespena. @scope araua sendabidea ez den arren, tresna konplexuen beharra murrizten du. Klase estrategikoen izendapenaren ordez edo batera erabiltzen denean, @scope-k CSS mantentzea idaztea errazago eta dibertigarriagoa egin dezake. Irakurketa gehiago
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Firefox 146 bertsioaren oharrak (Firefox) Arakatzailearen laguntza (CanIUse) CSS esparru ezagunak (CSS 2024 egoera) "C" CSS-n: Cascade", Thomas Yip (CSS-Tricks) BEM Sarrera (Lortu BEM)
