Apgūstot CSS pamatprincipus, tiek mācīts rakstīt modulārus, atkārtoti lietojamus un aprakstošus stilus, lai nodrošinātu apkopi. Taču, kad izstrādātāji iesaistās reālās pasaules lietojumprogrammās, bieži vien šķiet, ka nav iespējams pievienot lietotāja interfeisa funkcijas, ja stili nenokļūst neparedzētās vietās. Šī problēma bieži vien pārvēršas pašpiepildošā cilpā; stili, kas teorētiski attiecas uz vienu elementu vai klasi, sāk parādīties tur, kur tiem nepieder. Tas liek izstrādātājam izveidot vēl specifiskākus atlasītājus, lai ignorētu noplūdušos stilus, kas pēc tam nejauši ignorē globālos stilus utt. Stingras klases nosaukumu konvencijas, piemēram, BEM, ir viens no šīs problēmas teorētiskajiem risinājumiem. BEM (Block, Element, Modifier) metodoloģija ir sistemātisks veids, kā nosaukt CSS klases, lai nodrošinātu CSS failu atkārtotu izmantošanu un struktūru. Šādas nosaukumu piešķiršanas metodes var samazināt kognitīvo slodzi, izmantojot domēna valodu, lai aprakstītu elementus un to stāvokli, un, ja tie tiek ieviesti pareizi, var atvieglot lielu lietojumprogrammu stilu uzturēšanu. Tomēr reālajā pasaulē tas ne vienmēr izdodas tā. Prioritātes var mainīties, un līdz ar izmaiņām īstenošana kļūst nekonsekventa. Nelielas izmaiņas HTML struktūrā var prasīt daudzas CSS klases nosaukumu pārskatīšanas. Izmantojot ļoti interaktīvās priekšgala lietojumprogrammas, klašu nosaukumi, kas atbilst BEM modelim, var kļūt gari un smagnēji (piemēram, app-user-overview__status--is-authenticating), un, ja netiek pilnībā ievēroti nosaukšanas noteikumi, tiek sabojāta sistēmas struktūra, tādējādi noliedzot tās priekšrocības. Ņemot vērā šos izaicinājumus, nav brīnums, ka izstrādātāji ir pievērsušies ietvariem, jo Tailwind ir vispopulārākā CSS sistēma. Tā vietā, lai mēģinātu cīnīties ar neuzvaramu specifiskuma karu starp stiliem, ir vieglāk atteikties no CSS kaskādes un izmantot rīkus, kas garantē pilnīgu izolāciju. Izstrādātāji vairāk izmanto komunālos pakalpojumus Kā mēs zinām, ka daži izstrādātāji vēlas izvairīties no kaskādes stiliem? Tas ir "mūsdienu" priekšgala rīku, piemēram, CSS-in-JS ietvaru, pieaugums, kas īpaši izstrādāts šim nolūkam. Darbs ar izolētiem stiliem, kas ir cieši saistīti ar konkrētiem komponentiem, var šķist svaiga gaisa malks. Tas novērš nepieciešamību nosaukt lietas — joprojām ir viens no nīstākajiem un laikietilpīgākajiem priekšgala uzdevumiem — un ļauj izstrādātājiem būt produktīviem, pilnībā neizprotot vai neizmantojot CSS mantojuma priekšrocības. Taču atteikšanās no CSS kaskādes ir saistīta ar savām problēmām. Piemēram, lai izveidotu stilus JavaScript valodā, ir nepieciešamas smagas veidošanas konfigurācijas, un tas bieži noved pie tā, ka stili neveikli sajaucas ar komponentu iezīmēšanu vai HTML. Tā vietā, lai rūpīgi pārdomātu nosaukumu piešķiršanas noteikumus, mēs ļaujam veidot rīkus, lai mūsu vietā automātiski ģenerētu atlasītājus un identifikatorus (piemēram, .jsx-3130221066), pieprasot izstrādātājiem sekot līdzi vēl vienai pseidovalodai. (It kā kognitīvā slodze, kas rodas, izprotot visu jūsu komponenta lietošanas efektu, nebūtu pietiekama!) Tālāka klašu nosaukšanas darba abstrahēšana līdz rīkiem nozīmē, ka pamata atkļūdošana bieži tiek ierobežota ar konkrētām lietojumprogrammu versijām, kas apkopotas izstrādei, nevis tiek izmantotas vietējās pārlūkprogrammas funkcijas, kas atbalsta tiešo atkļūdošanu, piemēram, izstrādātāja rīki. Tas ir gandrīz tāpat, kā mums ir jāizstrādā rīki, lai atkļūdotu rīkus, kurus mēs izmantojam, lai abstrahētu to, ko tīmeklis jau nodrošina. Tas viss tiek darīts, lai izvairītos no standarta CSS rakstīšanas “sāpēm”. Par laimi, mūsdienu CSS funkcijas ne tikai padara standarta CSS rakstīšanu elastīgāku, bet arī sniedz tādiem izstrādātājiem kā mēs daudz vairāk iespēju pārvaldīt kaskādi un likt tai darboties mūsu labā. CSS kaskādes slāņi ir lielisks piemērs, taču ir vēl viena funkcija, kurai pārsteidzoši trūkst uzmanības — lai gan tas mainās tagad, kad tā nesen ir kļuvusi saderīga ar bāzes līniju. CSS @scope At-Rule Es uzskatu, ka CSS @scope at-noteikums ir potenciāls līdzeklis pret stila noplūdes izraisītu trauksmi, kuru mēs esam aplūkojuši, un tas neliek mums apdraudēt vietējā tīmekļa priekšrocības attiecībā uz abstrakcijām un papildu veidošanas rīkiem. “@scope CSS at-noteikums ļauj atlasīt elementus konkrētos DOM apakškokos, precīzi atlasot elementus, nerakstot pārāk specifiskus atlasītājus, kurus ir grūti ignorēt, un pārāk cieši nesavienojot atlasītājus ar DOM struktūru.” — MDN
Citiem vārdiem sakot, mēs varam strādāt ar izolētiem stiliem konkrētos gadījumos, neupurējot mantošanu, kaskādes vai pat pamata problēmu nošķiršanu.tas ir bijis ilgstošs priekšgala izstrādes vadmotīvs. Turklāt tam ir lielisks pārlūkprogrammas pārklājums. Faktiski Firefox 146 decembrī pievienoja @scope atbalstu, padarot to pirmo reizi saderīgu ar Baseline. Šeit ir vienkāršs salīdzinājums starp pogu, kas izmanto BEM modeli, un @scope noteikumu:
@scope noteikums nodrošina precizitāti ar mazāku sarežģītību. Izstrādātājam vairs nav jāveido robežas, izmantojot klašu nosaukumus, kas, savukārt, ļauj rakstīt atlasītājus, kuru pamatā ir vietējie HTML elementi, tādējādi novēršot nepieciešamību pēc preskriptīviem CSS klašu nosaukumu modeļiem. Vienkārši novēršot vajadzību pēc klases nosaukumu pārvaldības, @scope var mazināt bailes, kas saistītas ar CSS lielos projektos.
Pamata lietošana
Lai sāktu, pievienojiet savam CSS kārtulu @scope un ievietojiet saknes atlasītāju, uz kuru tiks attiecināti stili:
@scope (
Piemēram, ja mēs tvērām stilus uz
@scope (nav) { a { /* Saišu stili navigācijas darbības jomā */ }
a:active { /* Aktīvie saišu stili */}
a:active::before { /* Aktīvā saite ar pseidoelementu papildu stilam */ }
@media (maksimālais platums: 768 pikseļi) { a { /* Adaptīvās korekcijas */ } } }
Tā pati par sevi nav revolucionāra funkcija. Tomēr tvērumam var pievienot otru argumentu, lai izveidotu apakšējo robežu, efektīvi definējot tvēruma sākuma un beigu punktu.
/* Jebkuram elementam ul iekšpusē netiks lietoti stili */ @scope (nav) uz (ul) { a { fonta izmērs: 14 pikseļi; } }
Šo praksi sauc par donut tvēruma noteikšanu, un var izmantot vairākas pieejas, tostarp virkni līdzīgu, ļoti specifisku atlasītāju, kas cieši saistīti ar DOM struktūru, :not pseido selektoru vai īpašu klašu nosaukumu piešķiršanu elementiem
Secinājums Utility-first CSS ietvari, piemēram, Tailwind, labi darbojas prototipiem un mazākiem projektiem. Tomēr to priekšrocības ātri samazinās, ja tās izmanto lielākos projektos, kuros iesaistīti vairāk nekā pāris izstrādātāju. Priekšgala izstrāde pēdējos gados ir kļuvusi arvien sarežģītāka, un CSS nav izņēmums. Lai gan @scope noteikums nav līdzeklis pret visu, tas var samazināt vajadzību pēc sarežģīta instrumenta. Izmantojot @scope stratēģiskās klases nosaukšanas vietā vai kopā ar to, var vieglāk un jautrāk rakstīt uzturējamu CSS. Tālāka lasīšana
CSS @scope (MDN) “CSS @scope”, Huans Djego Rodrigess (CSS-Tricks) Firefox 146 piezīmes par laidienu (Firefox) Pārlūka atbalsts (CanIUse) Populāri CSS ietvari (CSS 2024. gada stāvoklis) "C" CSS: kaskāde", Thomas Yip (CSS-Tricks) BEM ievads (iegūstiet BEM)
