Þegar þú lærir meginreglur undirstöðu CSS er manni kennt að skrifa máta, endurnýtanlega og lýsandi stíla til að tryggja viðhald. En þegar forritarar taka þátt í raunverulegum forritum, finnst mér oft ómögulegt að bæta við notendaviðmóti án þess að stíll leki inn á óviljandi svæði. Þetta mál snjóar oft í sjálfuppfyllandi lykkju; stílar sem eru fræðilega settir að einum þætti eða flokki byrja að birtast þar sem þeir eiga ekki heima. Þetta neyðir þróunaraðilann til að búa til enn ákveðnari veljara til að hnekkja leka stílum, sem síðan hnekkja alþjóðlegum stílum fyrir slysni, og svo framvegis. Stífar flokkaheitareglur, eins og BEM, eru ein fræðileg lausn á þessu máli. BEM (Block, Element, Modifier) aðferðafræðin er kerfisbundin leið til að nefna CSS flokka til að tryggja endurnýtanleika og uppbyggingu innan CSS skráa. Nafnavenjur eins og þessar geta dregið úr vitsmunalegu álagi með því að nýta tungumál léns til að lýsa þáttum og ástandi þeirra, og ef þær eru útfærðar á réttan hátt, geta stíll fyrir stór forrit auðveldara að viðhalda. Í hinum raunverulega heimi gengur það hins vegar ekki alltaf svona. Forgangsröðun getur breyst og við breytingar verður framkvæmdin ósamræmi. Litlar breytingar á HTML uppbyggingu geta krafist margra CSS flokks nafna endurskoðunar. Með mjög gagnvirkum framendaforritum geta bekkjarheiti sem fylgja BEM mynstrinu orðið löng og ómeðhöndluð (t.d. app-notandi-yfirlit__status--er-auðvottað), og það að fylgja ekki nafnareglunum að fullu brýtur uppbyggingu kerfisins og dregur þar með úr ávinningi þess. Í ljósi þessara áskorana er engin furða að verktaki hafi snúið sér að ramma, Tailwind er vinsælasta CSS ramminn. Frekar en að reyna að berjast við það sem virðist vera óvinnandi sérhæfnistríð milli stíla, er auðveldara að gefast upp á CSS Cascade og nota verkfæri sem tryggja algjöra einangrun. Hönnuðir halla sér meira að tólum Hvernig vitum við að sumir hönnuðir eru áhugasamir um að forðast steypta stíla? Það er uppgangur „nútíma“ framendaverkfæra – eins og CSS-in-JS ramma – hannað sérstaklega í þeim tilgangi. Að vinna með einangruðum stílum sem eru þétt settir að tilteknum hlutum getur virst eins og ferskt loft. Það fjarlægir þörfina á að nefna hluti - enn eitt hataðasta og tímafrekasta framhliðarverkefnið - og gerir forriturum kleift að vera afkastamikill án þess að skilja að fullu eða nýta kosti CSS erfða. En að sleppa CSS Cascade fylgir eigin vandamálum. Til dæmis, að semja stíla í JavaScript krefst mikillar byggingarstillingar og leiðir oft til þess að stílar blandast óþægilega saman við íhlutamerki eða HTML. Í stað þess að íhuga nafngiftir, leyfum við smíði verkfæra til að búa til sjálfvirkt val og auðkenni fyrir okkur (t.d. .jsx-3130221066), sem krefst þess að forritarar haldi í við enn eitt gervitungumálið í sjálfu sér. (Eins og vitsmunalegt álag við að skilja hvað öll notkunaráhrif íhluta þíns gera væri ekki nú þegar nóg!) Frekari útdráttur á því að nefna flokka í verkfæri þýðir að grunnkembiforrit er oft bundið við sérstakar forritaútgáfur sem eru settar saman til þróunar, frekar en að nýta innfædda vafraeiginleika sem styðja kembiforrit í beinni, eins og þróunartól. Það er næstum eins og við þurfum að þróa verkfæri til að kemba verkfærin sem við erum að nota til að draga úr því sem vefurinn veitir nú þegar - allt til þess að flýja frá „sársauka“ við að skrifa staðlað CSS. Sem betur fer gera nútíma CSS eiginleikar ekki aðeins ritun staðlaðs CSS sveigjanlegri heldur gefa forriturum eins og okkur miklu meira vald til að stjórna hlaupinu og láta það virka fyrir okkur. CSS Cascade Layers eru frábært dæmi, en það er annar eiginleiki sem fær ótrúlega skort á athygli - þó að það sé að breytast nú þegar það hefur nýlega orðið grunnlínusamhæft. CSS @scope At-Rule Ég tel CSS @scope at-rule vera mögulega lækning við kvíða af völdum stílleka sem við höfum fjallað um, kvíða sem neyðir okkur ekki til að skerða kosti innfæddra vefa fyrir útdrætti og auka smíðaverkfæri. "@scope CSS at-reglan gerir þér kleift að velja þætti í sérstökum DOM undirtré, miða á þætti nákvæmlega án þess að skrifa of ákveðna veljara sem erfitt er að hnekkja og án þess að tengja veljana þína of þétt við DOM uppbygginguna." — MDN
Með öðrum orðum, við getum unnið með einangraða stíla í sérstökum tilfellum án þess að fórna arfleifð, straumhvörfum eða jafnvel grunnaðskilnaði áhyggjuefna.það hefur verið langvarandi leiðarljós í framhliðarþróun. Auk þess hefur það frábæra vafraþekju. Reyndar bætti Firefox 146 við stuðningi við @scope í desember, sem gerir það grunnlínu samhæft í fyrsta skipti. Hér er einfaldur samanburður á hnappi sem notar BEM mynstur á móti @scope reglunni:
@scope reglan gerir ráð fyrir nákvæmni með minni flóknum hætti. Framkvæmdaraðilinn þarf ekki lengur að búa til mörk með því að nota bekkjarheiti, sem aftur gerir þeim kleift að skrifa veljara byggða á innfæddum HTML þáttum, og útilokar þar með þörfina fyrir fyrirskipandi CSS flokks nafnamynstur. Með því einfaldlega að fjarlægja þörfina fyrir flokksnafnastjórnun getur @scope dregið úr óttanum sem tengist CSS í stórum verkefnum.
Grunnnotkun
Til að byrja skaltu bæta @scope reglunni við CSS og setja inn rótarval sem stílar verða settir í:
@scope (
Svo, til dæmis, ef við myndum reikna stíl að
@scope (nav) { a { /* Tengill stíll innan vökvasviðs */ }
a:active { /* Virkir tengistílar */ }
a:active::before { /* Virkur hlekkur með gervi-einingu fyrir auka stíl */ }
@media (hámarksbreidd: 768px) { a { /* Móttækilegar breytingar */ } } }
Þetta eitt og sér er ekki byltingarkennd eiginleiki. Hins vegar er hægt að bæta öðrum rökum við umfangið til að búa til lægri mörk, sem skilgreinir í raun upphafs- og endapunkta umfangsins.
/* Allir þættir inni í ul munu ekki hafa stílana notaða */ @scope (nav) til (ul) { a { leturstærð: 14px; } }
Þessi aðferð er kölluð kleinuhringjasvið og það eru nokkrar aðferðir sem hægt er að nota, þar á meðal röð af svipuðum, mjög sértækum valmyndum sem eru þétt tengdir við DOM uppbygginguna, :ekki gervivali, eða úthluta sérstökum flokksnöfnum á þætti innan
Niðurstaða CSS rammar sem eru fyrstir í notkun, eins og Tailwind, virka vel fyrir frumgerð og smærri verkefni. Kostir þeirra minnka þó fljótt þegar þeir eru notaðir í stærri verkefnum sem taka þátt í fleiri en nokkrum hönnuðum. Framhlið þróun hefur orðið sífellt offlóknari á síðustu árum og CSS er engin undantekning. Þó að @scope reglan sé ekki lækning, getur hún dregið úr þörfinni fyrir flókin verkfæri. Þegar það er notað í stað, eða samhliða stefnumótandi flokksnöfnun, getur @scope gert það auðveldara og skemmtilegra að skrifa viðhaldshæfan CSS. Frekari lestur
CSS @scope (MDN) „CSS @scope“, Juan Diego Rodríguez (CSS-Tricks) Firefox 146 útgáfuskýrslur (Firefox) Vafrastuðningur (CanIUse) Vinsælir CSS rammar (State of CSS 2024) „C“ í CSS: Cascade, Thomas Yip (CSS-Tricks) BEM kynning (Fáðu BEM)
