Meta titgħallem il-prinċipji tas-CSS bażiku, wieħed jiġi mgħallem jikteb stili modulari, li jistgħu jerġgħu jintużaw u deskrittivi biex jiżgura li jinżammu. Iżda meta l-iżviluppaturi jsiru involuti ma 'applikazzjonijiet tad-dinja reali, ħafna drabi jħossu impossibbli li żżid karatteristiċi ta' l-UI mingħajr ma l-istili jnixxu f'żoni mhux intenzjonati. Din il-kwistjoni ta 'spiss snowballs f'linja li tissodisfa lilha nnifisha; stili li teoretikament huma mmirati għal element jew klassi waħda jibdew jidhru fejn ma jappartjenux. Dan iġġiegħel lill-iżviluppatur joħloq seletturi saħansitra aktar speċifiċi biex jegħlbu l-istili leaked, li mbagħad aċċidentalment jegħlbu l-istili globali, eċċ. Il-konvenzjonijiet tal-ismijiet tal-klassi riġidi, bħal BEM, huma soluzzjoni teoretika waħda għal din il-kwistjoni. Il-metodoloġija BEM (Block, Element, Modifier) hija mod sistematiku ta' kif jiġu ssemmi l-klassijiet tas-CSS biex jiġu żgurati l-użu mill-ġdid u l-istruttura fi ħdan il-fajls CSS. Konvenzjonijiet ta' ismijiet bħal dawn jistgħu jnaqqsu t-tagħbija konjittiva billi jisfruttaw il-lingwa tad-dominju biex jiddeskrivu l-elementi u l-istat tagħhom, u jekk jiġu implimentati b'mod korrett, jistgħu jagħmlu stili għal applikazzjonijiet kbar aktar faċli biex jinżammu. Fid-dinja reali, madankollu, mhux dejjem taħdem hekk. Il-prijoritajiet jistgħu jinbidlu, u bil-bidla, l-implimentazzjoni ssir inkonsistenti. Bidliet żgħar fl-istruttura HTML jistgħu jeħtieġu ħafna reviżjonijiet tal-isem tal-klassi CSS. B'applikazzjonijiet front-end interattivi ħafna, l-ismijiet tal-klassi li jsegwu l-mudell BEM jistgħu jsiru twal u diffiċli (eż., app-user-overview__status--is-authenticating), u li ma jaderixxux bis-sħiħ mar-regoli tal-ismijiet jiksru l-istruttura tas-sistema, u b'hekk jiċħdu l-benefiċċji tagħha. Minħabba dawn l-isfidi, mhux ta’ b’xejn li l-iżviluppaturi daru għal oqfsa, Tailwind huwa l-aktar qafas CSS popolari. Pjuttost milli tipprova tiġġieled dik li tidher bħala gwerra ta 'speċifiċità li ma tirbaħx bejn l-istili, huwa aktar faċli li tiċċedi fuq is-CSS Cascade u tuża għodod li jiggarantixxu iżolament sħiħ. L-iżviluppaturi Lean More On Utilities Kif nafu li xi żviluppaturi huma ħerqana li jevitaw stili cascaded? Hija ż-żieda ta 'għodda ta' quddiem "moderna" - bħal oqfsa CSS-in-JS - iddisinjati speċifikament għal dak il-għan. Ħidma bi stili iżolati li huma strettament ambitu għal komponenti speċifiċi jista 'jidher bħala nifs ta' arja friska. Tneħħi l-ħtieġa li jissemmew l-affarijiet - għadu wieħed mill-kompiti front-end l-aktar mibegħda u li jieħu ħafna ħin - u jippermetti lill-iżviluppaturi jkunu produttivi mingħajr ma jifhmu bis-sħiħ jew jisfruttaw il-benefiċċji tal-wirt CSS. Iżda t-tneħħija tas-CSS Cascade tiġi bil-problemi tagħha stess. Pereżempju, il-kompożizzjoni ta' stili f'JavaScript teħtieġ konfigurazzjonijiet ta' bini tqal u ħafna drabi twassal għal stili li jħalltu b'mod skomdu ma' markup tal-komponenti jew HTML. Minflok konvenzjonijiet tal-ismijiet ikkunsidrati bir-reqqa, inħallu għodod tal-bini biex jiġġeneraw seletturi u identifikaturi awtomatikament għalina (eż., .jsx-3130221066), li jeħtieġu lill-iżviluppaturi biex ilaħħqu ma 'psewdo-lingwa oħra fiha nnifisha. (Bħallikieku t-tagħbija konjittiva tal-fehim x'jagħmlu l-Effects tal-użu tal-komponenti kollha tiegħek ma kinitx diġà biżżejjed!) L-astrazzjoni ulterjuri tax-xogħol ta 'l-ismijiet tal-klassijiet għall-għodda tfisser li d-debugging bażiku ħafna drabi huwa ristrett għal verżjonijiet ta' applikazzjoni speċifiċi kkompilati għall-iżvilupp, aktar milli lieva karatteristiċi tal-brawżer indiġeni li jappoġġjaw id-debugging ħajjin, bħal Għodod tal-Iżviluppaturi. Huwa kważi qisu għandna bżonn niżviluppaw għodod biex niddebuggjaw l-għodod li qed nużaw biex nistrattaw dak li diġà tipprovdi l-web - kollha għall-fini li naħrab mill-"uġigħ" tal-kitba standard tas-CSS. Fortunatament, il-karatteristiċi moderni tas-CSS mhux biss jagħmlu l-kitba standard tas-CSS aktar flessibbli iżda wkoll jagħtu lill-iżviluppaturi bħalna ħafna aktar setgħa biex jimmaniġġjaw il-kaskata u jagħmluha taħdem għalina. Is-CSS Cascade Layers huma eżempju mill-aqwa, iżda hemm karatteristika oħra li tikseb nuqqas ta 'attenzjoni sorprendenti - għalkemm dan qed jinbidel issa li dan l-aħħar sar kompatibbli mal-Line Bażi. Is-CSS @scope At-Rule Inqis li s-CSS @scope at-rule hija kura potenzjali għat-tip ta 'ansjetà indotta minn tnixxija tal-istil li koprejna, waħda li ma ġġegħilniex nikkompromessi vantaġġi tal-web indiġeni għal astrazzjonijiet u għodda ta' bini żejjed. "Ir-regola @scope CSS at-rule tippermettilek tagħżel elementi f'subtrees DOM speċifiċi, billi timmira elementi preċiżament mingħajr ma tikteb seletturi speċifiċi żżejjed li huma diffiċli biex jingħelbu, u mingħajr ma tgħaqqad is-seletturi tiegħek sew mal-istruttura DOM."— MDN
Fi kliem ieħor, nistgħu naħdmu bi stili iżolati f'każijiet speċifiċi mingħajr ma nissagrifikaw il-wirt, il-kaskata, jew saħansitra s-separazzjoni bażika tat-tħassibli kien prinċipju gwida fit-tul tal-iżvilupp front-end. Barra minn hekk, għandu kopertura eċċellenti tal-browser. Fil-fatt, Firefox 146 żied l-appoġġ għal @scope f'Diċembru, u għamilha Baseline kompatibbli għall-ewwel darba. Hawn hu paragun sempliċi bejn buttuna li tuża l-mudell BEM versus ir-regola @scope:
Ir-regola @scope tippermetti preċiżjoni b'inqas kumplessità. L-iżviluppatur m'għadux jeħtieġ li joħloq konfini bl-użu ta 'ismijiet ta' klassi, li, min-naħa tiegħu, jippermettilhom jiktbu seletturi bbażati fuq elementi HTML indiġeni, u b'hekk jeliminaw il-ħtieġa għal mudelli preskrittivi ta 'ismijiet ta' klassi CSS. Billi sempliċement tneħħi l-ħtieġa għall-ġestjoni tal-isem tal-klassi, @scope jista 'jtaffi l-biża' assoċjata ma 'CSS fi proġetti kbar.
Użu Bażiku
Biex tibda, żid ir-regola @scope mas-CSS tiegħek u daħħal selettur tal-għeruq li għalih se jiġu skoperti l-istili:
@scope (
Allura, pereżempju, kieku kellna niskopru stili għal element
@scope (nav) { a { /* Link stili fl-ambitu tan-nav */ }
a:active { /* Stili ta' link attivi */ }
a:active::before { /* Link attiva b'psewdo-element għal stil addizzjonali */ }
@media (wisa' massimu: 768px) { a { /* Aġġustamenti li jirrispondu */ } } }
Dan, waħdu, mhuwiex karatteristika innovattiva. Madankollu, it-tieni argument jista 'jiġi miżjud mal-ambitu biex jinħoloq limitu aktar baxx, li jiddefinixxi b'mod effettiv il-punti tal-bidu u tat-tmiem tal-ambitu.
/* Kwalunkwe element ġewwa ul mhux se jkollu l-istili applikati */ @scope (nav) sa (ul) { a { daqs tat-tipa: 14px; } }
Din il-prattika tissejjaħ donut scoping, u hemm diversi approċċi li wieħed jista 'juża, inklużi serje ta' seletturi simili u speċifiċi ħafna akkoppjati sewwa mal-istruttura DOM, :not pseudo-selector, jew jassenja ismijiet ta 'klassi speċifiċi għal elementi fi ħdan il-
Konklużjoni L-oqfsa CSS ta 'l-ewwel utilità, bħal Tailwind, jaħdmu tajjeb għall-prototipi u proġetti iżgħar. Il-benefiċċji tagħhom jonqsu malajr, madankollu, meta jintużaw fi proġetti akbar li jinvolvu aktar minn koppja ta 'żviluppaturi. L-iżvilupp front-end sar dejjem aktar ikkumplikat żżejjed fl-aħħar ftit snin, u CSS mhijiex eċċezzjoni. Filwaqt li r-regola @scope mhix kura għal kollox, tista 'tnaqqas il-ħtieġa għal għodda kumplessa. Meta jintuża minflok, jew flimkien mal-ismijiet strateġiċi tal-klassi, @scope jista 'jagħmilha aktar faċli u aktar divertenti biex tikteb CSS li jista' jinżamm. Aktar Qari
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Noti ta' Rilaxx ta' Firefox 146 (Firefox) Appoġġ għall-Browser (CanIUse) Oqfsa CSS Popolari (l-Istat tas-CSS 2024) "Il-"C" f'CSS: Cascade", Thomas Yip (CSS-Tricks) Introduzzjoni tal-BEM (Ikseb BEM)
