Mokantis pagrindinių CSS principų, mokoma rašyti modulinius, daugkartinio naudojimo ir aprašomuosius stilius, kad būtų užtikrintas prižiūrėjimas. Tačiau kai kūrėjai įsitraukia į realaus pasaulio programas, dažnai atrodo, kad neįmanoma pridėti vartotojo sąsajos funkcijų, kad stiliai nepatektų į nenumatytas sritis. Ši problema dažnai virsta savaime išsipildančia kilpa; stiliai, kurie teoriškai taikomi vienam elementui ar klasei, pradeda rodytis ten, kur jiems nepriklauso. Tai verčia kūrėją sukurti dar konkretesnius parinkiklius, kad nepaisytų nutekėjusių stilių, kurie vėliau netyčia nepaiso visuotinių stilių ir pan. Vienas iš teorinių šios problemos sprendimo būdų yra griežti klasių pavadinimo susitarimai, pvz., BEM. BEM (Block, Element, Modifier) metodika yra sistemingas būdas pavadinti CSS klases, siekiant užtikrinti pakartotinį naudojimą ir CSS failų struktūrą. Tokios pavadinimų suteikimo taisyklės gali sumažinti pažinimo apkrovą, nes naudojamos domeno kalba apibūdinti elementus ir jų būseną, o tinkamai įdiegus didelių programų stilius gali būti lengviau prižiūrimas. Tačiau realiame pasaulyje tai ne visada pavyksta. Prioritetai gali keistis, o pasikeitus įgyvendinimas tampa nenuoseklus. Dėl nedidelių HTML struktūros pakeitimų gali prireikti daug CSS klasės pavadinimo peržiūrų. Naudojant labai interaktyvias priekines programas, klasių pavadinimai, atitinkantys BEM modelį, gali tapti ilgi ir nepatogūs (pvz., app-user-overview__status--is-authenticating), o ne visiškai laikantis pavadinimų suteikimo taisyklių sulaužoma sistemos struktūra ir taip paneigiama jos nauda. Atsižvelgiant į šiuos iššūkius, nenuostabu, kad kūrėjai kreipėsi į sistemas, o „Tailwind“ yra populiariausia CSS sistema. Užuot bandę kovoti su neįveikiamu specifiškumo karu tarp stilių, lengviau atsisakyti CSS kaskados ir naudoti įrankius, garantuojančius visišką izoliaciją. Kūrėjai daugiau naudojasi komunalinėmis paslaugomis Kaip žinoti, kad kai kurie kūrėjai nori vengti pakopinių stilių? Tai „šiuolaikinių“ priekinių įrankių, tokių kaip CSS-in-JS sistemos, atsiradimas, sukurtas specialiai šiam tikslui. Darbas su izoliuotais stiliais, kurie yra griežtai susieti su konkrečiais komponentais, gali atrodyti kaip gaivaus oro gurkšnis. Tai pašalina būtinybę įvardinti dalykus – vis dar yra viena iš labiausiai nekenčiamų ir daugiausiai laiko užimančių priekinių užduočių – ir leidžia kūrėjams būti produktyviems visiškai nesuprantant CSS paveldėjimo pranašumų ir jais nepasinaudojant. Tačiau atsisakius CSS kaskados kyla savų problemų. Pavyzdžiui, norint sukurti „JavaScript“ stilius, reikia sudėtingų kūrimo konfigūracijų, todėl stiliai dažnai nepatogiai susimaišo su komponentų žymėjimu arba HTML. Užuot kruopščiai apgalvoję pavadinimų suteikimo taisykles, leidžiame kūrimo įrankiams automatiškai generuoti parinkiklius ir identifikatorius (pvz., .jsx-3130221066), todėl kūrėjams reikia neatsilikti nuo dar vienos pseudokalbos. (Tarsi kognityvinio krūvio suprasti, ką daro visi jūsų komponento naudojimo efektai, dar nepakako!) Tolesnis klasių pavadinimų suteikimo į įrankius darbas reiškia, kad pagrindinis derinimas dažnai apsiriboja konkrečiomis programos versijomis, sudarytomis kūrimui, o ne naudojant vietines naršyklės funkcijas, kurios palaiko tiesioginį derinimą, pvz., Kūrėjo įrankius. Panašu, kad mums reikia sukurti įrankius, skirtus derinti įrankius, kuriuos naudojame, kad abstrahuotume tai, ką žiniatinklis jau teikia – visa tai tam, kad pabėgtume nuo standartinio CSS rašymo „skausmo“. Laimei, šiuolaikinės CSS funkcijos ne tik daro standartinio CSS rašymą lankstesnį, bet ir suteikia tokiems kūrėjams kaip mes daug daugiau galių valdyti pakopą ir priversti ją dirbti mums. CSS kaskados sluoksniai yra puikus pavyzdys, tačiau yra dar viena funkcija, kuriai stebėtinai trūksta dėmesio – nors dabar ji keičiasi, nes neseniai tapo suderinama su bazine linija. CSS @scope At-Rule Manau, kad CSS @scope at-taisyklė yra galimas vaistas nuo stiliaus nutekėjimo sukelto nerimo, apie kurį kalbėjome, ir kuris neverčia mūsų pažeisti vietinio žiniatinklio pranašumų dėl abstrakcijų ir papildomų kūrimo įrankių. „@scope CSS at-taisyklė leidžia pasirinkti elementus konkrečiuose DOM pomedžiuose, tiksliai nukreipiant elementus neįrašant pernelyg specifinių parinktuvų, kuriuos sunku nepaisyti, ir per glaudžiai nesusiejant parinktuvų su DOM struktūra.
Kitaip tariant, tam tikrais atvejais galime dirbti su izoliuotais stiliais, neprarandant paveldėjimo, pakopų ar net pagrindinio problemų atskyrimo.tai buvo ilgalaikis pagrindinis kūrimo principas. Be to, jis turi puikią naršyklės aprėptį. Tiesą sakant, „Firefox 146“ gruodį pridėjo @scope palaikymą, todėl pirmą kartą jis buvo suderinamas su „Baseline“. Štai paprastas mygtuko, naudojančio BEM šabloną, ir @scope taisyklės palyginimas:
@scope taisyklė leidžia pasiekti tikslumo ir mažiau sudėtingumo. Kūrėjui nebereikia kurti ribų naudojant klasių pavadinimus, o tai, savo ruožtu, leidžia rašyti parinkiklius, pagrįstus vietiniais HTML elementais, todėl nebereikia įpareigojančių CSS klasių pavadinimų šablonų. Paprasčiausiai pašalinus klasės pavadinimo valdymo poreikį, @scope gali sumažinti baimę, susijusią su CSS dideliuose projektuose.
Pagrindinis naudojimas
Norėdami pradėti, pridėkite @scope taisyklę prie CSS ir įterpkite šakninį parinkiklį, į kurį bus įtraukti stiliai:
@scope (
Pavyzdžiui, jei stilius pritaikome prie
@scope (nav) { a { /* Nuorodų stiliai navigacijos srityje */ }
a:active { /* Aktyvūs nuorodų stiliai */}
a:active::before { /* Aktyvi nuoroda su pseudoelementu papildomam stiliui */ }
@media (maksimalus plotis: 768 piks.) { a { /* Interaktyvūs koregavimai */ } } }
Tai savaime nėra novatoriška savybė. Tačiau prie taikymo srities galima pridėti antrą argumentą, kad būtų sukurta apatinė riba, veiksmingai apibrėžianti apimties pradžios ir pabaigos taškus.
/* Bet kuriam elementui ul viduje nebus taikomi stiliai */ @scope (nav) į (ul) { a { šrifto dydis: 14 pikselių; } }
Ši praktika vadinama spurgos apimties nustatymu ir yra keletas būdų, kuriuos galima naudoti, įskaitant daugybę panašių, labai specifinių parinktuvų, glaudžiai susietų su DOM struktūra, :not pseudo parinkiklį arba konkrečių klasių pavadinimų priskyrimą elementams
Išvada Pirmosios naudingumo CSS sistemos, pvz., Tailwind, puikiai tinka prototipų kūrimui ir mažesniems projektams. Tačiau jų nauda greitai sumažėja, kai jie naudojami didesniuose projektuose, kuriuose dalyvauja daugiau nei pora kūrėjų. Per pastaruosius kelerius metus priekinės dalies kūrimas tapo vis sudėtingesnis, o CSS nėra išimtis. Nors @scope taisyklė nėra vaistas nuo visų, ji gali sumažinti sudėtingų įrankių poreikį. Naudojant @scope vietoj strateginio klasės pavadinimo arba šalia jo, rašyti prižiūrimą CSS gali būti lengviau ir smagiau. Tolesnis skaitymas
CSS @scope (MDN) „CSS @scope“, Juanas Diego Rodríguezas („CSS-Tricks“) „Firefox 146“ laidos pastabos („Firefox“) Naršyklės palaikymas (CanIUse) Populiarios CSS sistemos (2024 m. CSS būsena) „C“ CSS: kaskados, Thomas Yip (CSS-gudrybės) BEM įvadas (Gaukite BEM)
