Wrth ddysgu egwyddorion CSS sylfaenol, dysgir i un ysgrifennu arddulliau modiwlaidd, y gellir eu hailddefnyddio, a disgrifiadol i sicrhau cynaladwyedd. Ond pan fydd datblygwyr yn ymwneud â chymwysiadau byd go iawn, mae'n aml yn teimlo'n amhosibl ychwanegu nodweddion UI heb fod arddulliau'n gollwng i feysydd anfwriadol. Mae'r mater hwn yn aml yn peli eira i mewn i ddolen hunangyflawnol; mae arddulliau sy'n cael eu cwmpasu'n ddamcaniaethol i un elfen neu ddosbarth yn dechrau dangos lle nad ydyn nhw'n perthyn. Mae hyn yn gorfodi'r datblygwr i greu dewiswyr hyd yn oed yn fwy penodol i ddiystyru'r arddulliau a ddatgelwyd, sydd wedyn yn diystyru arddulliau byd-eang yn ddamweiniol, ac ati. Mae confensiynau enwau dosbarth anhyblyg, megis BEM, yn un ateb damcaniaethol i'r mater hwn. Mae'r fethodoleg BEM (Bloc, Elfen, Addasydd) yn ffordd systematig o enwi dosbarthiadau CSS i sicrhau y gellir eu hailddefnyddio a'u strwythur o fewn ffeiliau CSS. Gall confensiynau enwi fel hyn leihau llwyth gwybyddol trwy ddefnyddio iaith parth i ddisgrifio elfennau a'u cyflwr, ac os cânt eu gweithredu'n gywir, gallant wneud arddulliau ar gyfer cymwysiadau mawr yn haws i'w cynnal. Yn y byd go iawn, fodd bynnag, nid yw bob amser yn gweithio allan felly. Gall blaenoriaethau newid, a gyda newid, daw'r gweithredu'n anghyson. Gall newidiadau bach i'r strwythur HTML ofyn am lawer o adolygiadau enw dosbarth CSS. Gyda chymwysiadau pen blaen rhyngweithiol iawn, gall enwau dosbarthiadau sy'n dilyn y patrwm BEM ddod yn hir ac yn anhylaw (e.e., app-user-overview__status --yn-dilysu), ac mae peidio â glynu'n llawn at y rheolau enwi yn torri strwythur y system, a thrwy hynny yn negyddu ei buddion. O ystyried yr heriau hyn, nid yw'n syndod bod datblygwyr wedi troi at fframweithiau, Tailwind yw'r fframwaith CSS mwyaf poblogaidd. Yn hytrach na cheisio ymladd yr hyn sy'n ymddangos fel rhyfel penodoldeb na ellir ei ennill rhwng arddulliau, mae'n haws rhoi'r gorau i'r CSS Cascade a defnyddio offer sy'n gwarantu unigedd llwyr. Mae datblygwyr yn pwyso mwy ar gyfleustodau Sut ydyn ni'n gwybod bod rhai datblygwyr yn awyddus i osgoi arddulliau rhaeadru? Dyma gynnydd offer pen blaen “modern” - fel fframweithiau CSS-in-JS - a ddyluniwyd yn benodol at y diben hwnnw. Gall gweithio gydag arddulliau ynysig sydd wedi'u cwmpasu'n dynn i gydrannau penodol ymddangos fel chwa o awyr iach. Mae'n dileu'r angen i enwi pethau - sy'n dal i fod yn un o'r tasgau blaen blaen sy'n ei gasáu fwyaf ac sy'n cymryd llawer o amser - ac yn caniatáu i ddatblygwyr fod yn gynhyrchiol heb ddeall na manteisio'n llawn ar fuddion etifeddiaeth CSS. Ond mae cael gwared ar y CSS Cascade yn dod â'i broblemau ei hun. Er enghraifft, mae cyfansoddi arddulliau yn JavaScript yn gofyn am ffurfweddau adeiladu trwm ac yn aml yn arwain at arddulliau sy'n cymysgu'n lletchwith â marcio cydrannau neu HTML. Yn lle confensiynau enwi a ystyriwyd yn ofalus, rydym yn caniatáu adeiladu offer i awtogynhyrchu detholwyr a dynodwyr i ni (e.e., .jsx-3130221066), gan ei gwneud yn ofynnol i ddatblygwyr gadw i fyny â ffug-iaith arall yn ac ohoni'i hun. (Fel pe na bai'r llwyth gwybyddol o ddeall yr hyn y mae holl Effeithiau defnydd eich cydran yn ei wneud yn ddigon yn barod!) Mae tynnu'r gwaith o enwi dosbarthiadau ymhellach i offer yn golygu bod dadfygio sylfaenol yn aml yn cael ei gyfyngu i fersiynau cymwysiadau penodol a luniwyd i'w datblygu, yn hytrach na defnyddio nodweddion porwr brodorol sy'n cefnogi dadfygio byw, megis Offer Datblygwr. Mae bron fel bod angen i ni ddatblygu offer i ddadfygio'r offer rydyn ni'n eu defnyddio i dynnu'r hyn y mae'r we eisoes yn ei ddarparu - i gyd er mwyn rhedeg i ffwrdd o'r “boen” o ysgrifennu CSS safonol. Yn ffodus, mae nodweddion CSS modern nid yn unig yn gwneud ysgrifennu CSS safonol yn fwy hyblyg ond hefyd yn rhoi llawer mwy o bŵer i ddatblygwyr fel ni reoli'r rhaeadru a gwneud iddo weithio i ni. Mae Haenau Rhaeadru CSS yn enghraifft wych, ond mae nodwedd arall sy'n cael diffyg sylw syfrdanol - er bod hynny'n newid nawr ei fod wedi dod yn gydnaws â'r Llinell Sylfaen yn ddiweddar. Mae CSS @scope At-Rule Rwy'n ystyried y CSS @scope wrth-reol i fod yn iachâd posibl ar gyfer y math o bryder a achosir gan arddull gollwng yr ydym wedi ymdrin ag ef, un nad yw'n ein gorfodi i gyfaddawdu manteision gwe brodorol ar gyfer tynnu dŵr ac offer adeiladu ychwanegol. “Mae rheol @scope CSS yn eich galluogi i ddewis elfennau mewn is-goed DOM penodol, gan dargedu elfennau yn union heb ysgrifennu detholwyr rhy benodol sy'n anodd eu diystyru, a heb gyplu'ch dewiswyr yn rhy dynn â'r strwythur DOM.” - MDN
Mewn geiriau eraill, gallwn weithio gydag arddulliau ynysig mewn achosion penodol heb aberthu etifeddiaeth, rhaeadru, neu hyd yn oed wahanu pryderon yn sylfaenol.sydd wedi bod yn egwyddor arweiniol hirsefydlog ar gyfer datblygiad pen blaen. Hefyd, mae ganddo sylw porwr rhagorol. Mewn gwirionedd, ychwanegodd Firefox 146 gefnogaeth i @scope ym mis Rhagfyr, gan ei gwneud yn Baseline gydnaws am y tro cyntaf. Dyma gymhariaeth syml rhwng botwm sy'n defnyddio'r patrwm BEM yn erbyn rheol @scope:
Mae'r rheol @scope yn caniatáu manwl gywirdeb gyda llai o gymhlethdod. Nid oes angen i'r datblygwr bellach greu ffiniau gan ddefnyddio enwau dosbarth, sydd, yn ei dro, yn caniatáu iddynt ysgrifennu detholwyr yn seiliedig ar elfennau HTML brodorol, gan ddileu'r angen am batrymau enw dosbarth CSS rhagnodol. Trwy ddileu'r angen am reoli enwau dosbarth, gall @scope leddfu'r ofn sy'n gysylltiedig â CSS mewn prosiectau mawr.
Defnydd Sylfaenol
I ddechrau, ychwanegwch y rheol @scope i'ch CSS a mewnosodwch ddewiswr gwraidd y bydd arddulliau'n cael eu cwmpasu:
@scope (
Felly, er enghraifft, pe baem yn cwmpasu arddulliau i elfen
@scope (llyw) { a { /* Dolen arddulliau o fewn cwmpas nav */ }
a:active {/* Arddulliau cyswllt gweithredol */ }
a:active::cyn {/* Cyswllt gweithredol gyda ffug-elfen ar gyfer steilio ychwanegol */ }
@cyfryngau (uchafswm-lled: 768px) { a { /* Addasiadau ymatebol */ } } }
Nid yw hyn, ar ei ben ei hun, yn nodwedd sy'n torri tir newydd. Fodd bynnag, gellir ychwanegu ail ddadl at y cwmpas i greu ffin is, gan ddiffinio mannau cychwyn a gorffen y cwmpas i bob pwrpas.
/* Ni fydd yr arddulliau yn berthnasol i unrhyw elfen y tu mewn i ul */ @scope (nav) i (ul) { a { maint y ffont: 14px; } }
Yr enw ar yr arfer hwn yw sgopio toesen, ac mae sawl dull y gellid eu defnyddio, gan gynnwys cyfres o ddetholwyr tebyg, hynod benodol wedi’u cysylltu’n dynn â strwythur DOM, dewiswr :nid ffug, neu neilltuo enwau dosbarthiadau penodol i elfennau o fewn y
Casgliad Mae fframweithiau CSS cyfleustodau-gyntaf, fel Tailwind, yn gweithio'n dda ar gyfer prototeipio a phrosiectau llai. Mae eu buddion yn lleihau'n gyflym, fodd bynnag, pan gânt eu defnyddio mewn prosiectau mwy sy'n cynnwys mwy nag un neu ddau o ddatblygwyr. Mae datblygiad pen blaen wedi dod yn fwyfwy cymhleth yn ystod yr ychydig flynyddoedd diwethaf, ac nid yw CSS yn eithriad. Er nad yw rheol @scope yn iachâd i gyd, gall leihau'r angen am offer cymhleth. Pan gaiff ei ddefnyddio yn lle, neu ochr yn ochr ag enwi dosbarth strategol, gall @scope ei gwneud hi'n haws ac yn fwy o hwyl i ysgrifennu CSS cynaliadwy. Darllen Pellach
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Nodiadau Rhyddhau Firefox 146 (Firefox) Cefnogaeth Porwr (CanIUse) Fframweithiau CSS Poblogaidd (Cyflwr CSS 2024) “Y “C” yn CSS: Cascade”, Thomas Yip (CSS-Tricks) Cyflwyniad BEM (Cael BEM)
