Nigbati o ba nkọ awọn ilana ti CSS ipilẹ, a kọ eniyan lati kọ modular, reusable, ati awọn aza apejuwe lati rii daju pe itọju. Ṣugbọn nigbati awọn olupilẹṣẹ ba ni ipa pẹlu awọn ohun elo gidi-aye, igbagbogbo o kan lara pe ko ṣee ṣe lati ṣafikun awọn ẹya UI laisi awọn aṣa ti n jo sinu awọn agbegbe ti a ko pinnu. Atejade yii igba snowballs sinu kan ara-mu lupu; awọn aza ti o ni imọ-jinlẹ si ipin kan tabi kilasi bẹrẹ lati ṣafihan nibiti wọn ko wa. Eyi fi agbara mu olupilẹṣẹ lati ṣẹda paapaa awọn yiyan pato diẹ sii lati bori awọn aṣa ti o jo, eyiti lẹhinna lairotẹlẹ bori awọn aṣa agbaye, ati bẹbẹ lọ. Awọn apejọ orukọ kilasi lile, gẹgẹbi BEM, jẹ ojutu imọ-jinlẹ kan si ọran yii. Ilana BEM (Block, Element, Modifier) jẹ ọna eto ti sisọ awọn kilasi CSS lati rii daju pe atunlo ati igbekalẹ laarin awọn faili CSS. Awọn apejọ lorukọ bii eyi le dinku fifuye oye nipa gbigbe ede ašẹ lati ṣapejuwe awọn eroja ati ipinlẹ wọn, ati pe ti a ba ṣe imuse ni deede, le ṣe awọn aṣa fun awọn ohun elo nla rọrun lati ṣetọju. Ni agbaye gidi, sibẹsibẹ, ko nigbagbogbo ṣiṣẹ bi iyẹn. Awọn ayo le yipada, ati pẹlu iyipada, imuse di aisedede. Awọn iyipada kekere si ọna HTML le nilo ọpọlọpọ awọn atunyẹwo orukọ kilasi CSS. Pẹlu awọn ohun elo iwaju-ibaraẹnisọrọ ti o ga julọ, awọn orukọ kilasi ti o tẹle ilana BEM le di gigun ati aibikita (fun apẹẹrẹ, app-user-overview__status - is-authenticating), ati pe ko ni ibamu ni kikun si awọn ofin orukọ n fọ eto eto naa, nitorinaa aibikita awọn anfani rẹ. Fun awọn italaya wọnyi, kii ṣe iyalẹnu pe awọn olupilẹṣẹ ti yipada si awọn ilana, Tailwind jẹ ilana CSS olokiki julọ. Dipo igbiyanju lati ja ohun ti o dabi ẹnipe ogun pato ti a ko le ṣẹgun laarin awọn aza, o rọrun lati fi silẹ lori CSS Cascade ati lo awọn irinṣẹ ti o ṣe iṣeduro ipinya pipe. Awọn Difelopa Tẹle Diẹ sii Lori Awọn ohun elo Bawo ni a ṣe mọ pe diẹ ninu awọn olupilẹṣẹ wa ni itara lati yago fun awọn aza ti o ti ṣofo? O jẹ igbega ti ohun elo “igbalode” iwaju-ipari - bii awọn ilana CSS-in-JS - ti a ṣe apẹrẹ pataki fun idi yẹn. Nṣiṣẹ pẹlu awọn aza ti o ya sọtọ ti o ni wiwọ ni wiwọ si awọn paati kan pato le dabi ẹmi ti afẹfẹ titun. O yọ iwulo lati lorukọ awọn nkan kuro - o tun jẹ ọkan ninu awọn iṣẹ-ṣiṣe iwaju-ipari ti o korira julọ ati akoko n gba - o si gba awọn olupilẹṣẹ laaye lati ni iṣelọpọ laisi oye ni kikun tabi mimu awọn anfani ti ogún CSS ṣiṣẹ. Ṣugbọn ditching CSS Cascade wa pẹlu awọn iṣoro tirẹ. Fun apẹẹrẹ, kikọ awọn aza ni JavaScript nilo awọn atunto ikole wuwo ati nigbagbogbo nyorisi awọn ara ti o ni inira pẹlu isamisi paati tabi HTML. Dipo ki a ṣe akiyesi awọn apejọ isọkọ ni pẹkipẹki, a gba awọn irinṣẹ kikọ laaye lati ṣe adaṣe awọn yiyan ati awọn idamọ fun wa (fun apẹẹrẹ, .jsx-3130221066), nilo awọn olupilẹṣẹ lati tọju pẹlu ede afarape miiran ninu ati funrararẹ. (Bi ẹnipe ẹru oye ti oye kini gbogbo awọn ipa lilo paati rẹ ko ti to!) Itọkasi siwaju si iṣẹ ti sisọ awọn kilasi si irinṣẹ irinṣẹ tumọ si pe n ṣatunṣe aṣiṣe ipilẹ nigbagbogbo ni idiwọ si awọn ẹya ohun elo kan pato ti a ṣajọpọ fun idagbasoke, dipo kikojọpọ awọn ẹya ẹrọ aṣawakiri abinibi ti o ṣe atilẹyin n ṣatunṣe aṣiṣe laaye, gẹgẹbi Awọn irinṣẹ Olùgbéejáde. O fẹrẹ dabi pe a nilo lati ṣe agbekalẹ awọn irinṣẹ lati yokokoro awọn irinṣẹ ti a nlo lati ṣabọ ohun ti oju opo wẹẹbu ti pese tẹlẹ - gbogbo rẹ nitori ṣiṣe kuro ni “irora” ti kikọ CSS boṣewa. Ni Oriire, awọn ẹya CSS ode oni kii ṣe kiki kikọ boṣewa CSS ni irọrun diẹ sii ṣugbọn tun fun awọn idagbasoke bi wa ni agbara nla diẹ sii lati ṣakoso kasikedi ati jẹ ki o ṣiṣẹ fun wa. CSS Cascade Layers jẹ apẹẹrẹ nla, ṣugbọn ẹya miiran wa ti o gba aini akiyesi iyalẹnu - botilẹjẹpe iyẹn n yipada ni bayi pe o ti di ibaramu Baseline laipẹ. The CSS @scope At-Ofin Mo ro CSS @scope at-ofin lati jẹ arowoto ti o pọju fun iru aibalẹ ti o fa-jo ti ara ti a ti bo, ọkan ti ko fi ipa mu wa lati ba awọn anfani wẹẹbu abinibi fun awọn abstractions ati afikun ohun elo kikọ. “Ofin @scope CSS ni-ofin n fun ọ laaye lati yan awọn eroja ni awọn abẹlẹ DOM kan pato, awọn eroja ti o fojusi ni deede laisi kikọ awọn yiyan pato-aṣeju ti o nira lati bori, ati laisi idapọ awọn yiyan rẹ ni wiwọ si eto DOM.”
Ni awọn ọrọ miiran, a le ṣiṣẹ pẹlu awọn ara ti o ya sọtọ ni awọn iṣẹlẹ kan pato laisi rubọ ogún, cascading, tabi paapaa ipinya ipilẹ ti awọn ifiyesiti o jẹ ilana itọnisọna ti o gun-gun ti idagbasoke iwaju-opin.
Pẹlupẹlu, o ni agbegbe aṣawakiri to dara julọ. Ni otitọ, Firefox 146 ṣafikun atilẹyin fun @scope ni Oṣu Kejila, ṣiṣe ni ibamu Baseline fun igba akọkọ. Eyi ni lafiwe ti o rọrun laarin bọtini kan nipa lilo ilana BEM dipo ofin @scope:
Ofin @scope ngbanilaaye fun pipe pẹlu idiju ti o dinku. Olùgbéejáde ko nilo lati ṣẹda awọn aala nipa lilo awọn orukọ kilasi, eyiti, lapapọ, ngbanilaaye wọn lati kọ awọn yiyan ti o da lori awọn eroja HTML abinibi, nitorinaa imukuro iwulo fun awọn ilana orukọ kilasi CSS prescriptive. Nipa yiyọ iwulo fun iṣakoso orukọ kilasi nikan, @scope le dinku iberu ti o ni nkan ṣe pẹlu CSS ni awọn iṣẹ akanṣe nla.
Ipilẹ Lilo
Lati bẹrẹ, ṣafikun ofin @scope si CSS rẹ ki o fi oluyan gbongbo kan si eyiti awọn aṣa yoo jẹ iwọn:
@scope (
Nitorinaa, fun apẹẹrẹ, ti a ba ni iwọn awọn aṣa si ipin
@scope (nav) { a {/* Awọn ọna asopọ laarin aaye nav */}
a: lọwọ {/* Awọn ọna asopọ ti nṣiṣe lọwọ */ }
a: lọwọ :: ṣaaju ki {/* Ọna asopọ ti nṣiṣe lọwọ pẹlu pseudo-ano fun afikun iselona */}
@media (iwọn ti o pọju: 768px) { a {/* Awọn atunṣe idahun */} } }
Eyi, lori ara rẹ, kii ṣe ẹya-ara ti ilẹ. Bibẹẹkọ, ariyanjiyan keji le ṣe afikun si aaye lati ṣẹda aala kekere kan, ni imunadoko ni asọye iwọn ibẹrẹ ati awọn aaye ipari.
/* Eyikeyi nkan inu ul kii yoo ni awọn aza ti a lo */ @scope (nav) si (ul) { a { iwọn fonti: 14px; } }
Iṣe yii ni a pe ni fifunni donut, ati pe ọpọlọpọ awọn isunmọ wa ti ọkan le lo, pẹlu lẹsẹsẹ iru, awọn yiyan pato ti o ga julọ ti a so pọ ni wiwọ si eto DOM, a: kii ṣe oluyanju, tabi fifi awọn orukọ kilasi kan pato si awọn eroja laarin
Ipari IwUlO-akọkọ CSS ilana, gẹgẹ bi awọn Tailwind, ṣiṣẹ daradara fun prototyping ati ki o kere ise agbese. Awọn anfani wọn yarayara dinku, sibẹsibẹ, nigba lilo ninu awọn iṣẹ akanṣe nla ti o kan diẹ sii ju awọn olupolowo tọkọtaya kan. Idagbasoke iwaju-ipari ti di pupọ si ni idiju ni awọn ọdun diẹ sẹhin, ati CSS kii ṣe iyatọ. Lakoko ti ofin @scope kii ṣe arowoto-gbogbo, o le dinku iwulo fun ohun elo irinṣẹ eka. Nigbati a ba lo ni aaye, tabi lẹgbẹẹ isọrukọ kilasi ilana, @scope le jẹ ki o rọrun ati igbadun diẹ sii lati kọ CSS ti o le ṣetọju. Siwaju kika
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Ẹtan) Awọn akọsilẹ itusilẹ Firefox 146 (Firefox) Atilẹyin ẹrọ aṣawakiri (CanIUlo) Awọn ilana CSS olokiki (Ipinlẹ CSS 2024) "C" naa ni CSS: Cascade", Thomas Yip (CSS-Tricks) Iṣafihan BEM (Gba BEM)
