Agus prionsabail bhunúsacha CSS á bhfoghlaim, múintear stíleanna modúlacha, ath-inúsáidte agus tuairisciúla a scríobh chun inchothaitheacht a chinntiú. Ach nuair a bhíonn baint ag forbróirí le feidhmchláir fhíorshaolacha, is minic a bhraitheann sé dodhéanta gnéithe Chomhéadain a chur leis gan stíleanna a bheith ag sceitheadh isteach i réimsí neamhbheartaithe. Is minic a thagann an tsaincheist seo isteach i lúb féin-chomhlíonta; tosaíonn stíleanna atá scóipe go teoiriciúil d’eilimint amháin nó d’aicme amháin ag taispeáint áit nach mbaineann siad. Cuireann sé seo iallach ar an bhforbróir roghnóirí níos sainiúla a chruthú chun na stíleanna sceite a shárú, rud a sháraíonn stíleanna domhanda de thaisme, agus mar sin de. Réiteach teoiriciúil amháin ar an gceist seo is ea coinbhinsiúin dochta maidir le hainmneacha ranga, mar BEM. Is bealach córasach é modheolaíocht BEM (Bloc, Eilimint, Mionathraitheoir) chun ranganna CSS a ainmniú chun ath-inúsáidteacht agus struchtúr laistigh de chomhaid CSS a chinntiú. Is féidir le coinbhinsiúin ainmniúcháin mar seo an t-ualach cognaíocha a laghdú trí theanga fearainn a ghiaráil chun cur síos a dhéanamh ar ghnéithe agus ar a staid, agus má chuirtear i bhfeidhm i gceart iad, is féidir leis na stíleanna d’fheidhmchláir mhóra a choinneáil níos éasca. Sa saol fíor, áfach, ní i gcónaí a oibríonn sé amach mar sin. Féadfaidh tosaíochtaí athrú, agus le hathrú, éiríonn cur i bhfeidhm neamh-chomhsheasmhach. Is féidir go mbeadh go leor athbhreithnithe ar ainmneacha ranga CSS ag teastáil le haghaidh athruithe beaga ar an struchtúr HTML. Le feidhmchláir an-idirghníomhacha tosaigh, féadann ainmneacha ranga a leanann patrún BEM éirí fada agus dothuigthe (m.sh., tá feidhmchlár-úsáideoir-forbhreathnú__status ---is-fhíordheimhniú), agus mura gcloífidh siad go hiomlán leis na rialacha ainmniúcháin, briseann sé struchtúr an chórais, rud a dhiúltaíonn a bhuntáistí. I bhfianaise na ndúshlán seo, ní haon ionadh go bhfuil forbróirí tar éis iompú chuig creataí, agus is é Tailwind an creat CSS is mó tóir. In áit a bheith ag iarraidh troid i gcoinne an chuma atá cosúil le cogadh sainiúlacht neamh-inbhuanaithe idir stíleanna, tá sé níos éasca éirí as an CSS Cascáidigh agus úsáid a bhaint as uirlisí a ráthaíonn aonrú iomlán. Forbróirí Lean Níos Mó Ar Fóntais Cén chaoi a bhfuil a fhios againn go bhfuil fonn ar roinnt forbróirí stíleanna cascáideacha a sheachaint? Is é an t-ardú ar uirlisí tosaigh “nua-aimseartha” - cosúil le creataí CSS-in-JS - atá deartha go sonrach chun na críche sin. Is féidir breathnú ar anáil aer úr ag obair le stíleanna iargúlta atá scóip go docht do chomhpháirteanna sonracha. Cuireann sé deireadh leis an ngá atá le rudaí a ainmniú — fós ar cheann de na tascanna tosaigh is fuath agus am-íditheach - agus ligeann d'fhorbróirí a bheith táirgiúil gan tuiscint iomlán nó giaráil buntáistí oidhreacht CSS. Ach tagann a chuid fadhbanna féin le díogáil an CSS Cascáidigh. Mar shampla, teastaíonn cumraíochtaí trom-thógála chun stíleanna a chumadh i JavaScript agus go minic bíonn stíleanna ag meascadh go han-chorraitheach le marcáil comhpháirte nó HTML. In ionad coinbhinsiúin ainmnithe a bhreithnítear go cúramach, ceadaímid uirlisí a thógáil chun roghnóirí agus aitheantóirí a uathghiniúint dúinn (m.sh., .jsx-3130221066), ag éileamh ar fhorbróirí coinneáil suas le teanga bhréige eile inti féin. (Amhail is dá mba nár leor cheana féin an t-ualach cognaíoch a bhaineann le tuiscint cad a dhéanann Éifeachtaí úsáide do chomhpháirt go léir!) Má dhéantar níos mó oibre maidir le hainmniú ranganna go huirlisiú a astarraingt, is minic go mbíonn an dífhabhtú bunúsach teoranta do leaganacha feidhmchláir ar leith a chuirtear le chéile le haghaidh forbartha, seachas úsáid a bhaint as gnéithe brabhsálaí dúchais a thacaíonn le dífhabhtaithe beo, mar Uirlisí Forbróirí. Tá sé beagnach cosúil go gcaithfimid uirlisí a fhorbairt chun na huirlisí atá á n-úsáid againn a dhífhabhtú chun an méid a sholáthraíonn an gréasán cheana féin a theibí - go léir ar mhaithe le éalú ón “phian” a bhaineann le CSS caighdeánach a scríobh. Ar ámharaí an tsaoil, ní hamháin go ndéanann gnéithe CSS nua-aimseartha an CSS caighdeánach scríbhneoireachta níos solúbtha ach tugann siad freisin i bhfad níos mó cumhachta d'fhorbróirí cosúil linne an easghluaiseachta a bhainistiú agus é a chur ag obair dúinn. Is sampla iontach iad Sraitheanna Cascáidigh CSS, ach tá gné eile ann a fhaigheann easpa aird iontas - cé go bhfuil sé ag athrú anois go bhfuil sé comhoiriúnach le Bunlíne le déanaí. An CSS @scope Ag-Riail Measaim an CSS @scope at-riail a bheith ina leigheas féideartha ar an saghas imní a spreag sceite stíl atá clúdaithe againn, rud nach gcuireann iallach orainn buntáistí gréasáin dúchasacha a chomhréiteach le haghaidh astarraingtí agus uirlisí tógála breise. “Cuireann an riail @scope CSS ar do chumas gnéithe a roghnú i bhfochrainn DOM ar leith, ag díriú go beacht ar ghnéithe gan roghnóirí ró-shonracha a scríobh ar deacair iad a shárú, agus gan do roghnóirí a chúpláil ró-dhian le struchtúr DOM.” - MDN
I bhfocail eile, is féidir linn oibriú le stíleanna iargúlta i gcásanna sonracha gan oidhreacht a íobairt, cascáidiú, nó fiú scaradh bunúsach imní.a bhí mar threoirphrionsabal fadtréimhseach maidir le forbairt tosaigh.
Ina theannta sin, tá clúdach brabhsálaí den scoth aige. Go deimhin, chuir Firefox 146 tacaíocht le @scope i mí na Nollag, rud a fhágann go bhfuil sé comhoiriúnach don chéad uair. Seo comparáid shimplí idir cnaipe a úsáideann an patrún BEM i gcoinne riail @scope:
Ceadaíonn an riail @scope do bheachtais le níos lú castachta. Ní gá don fhorbróir teorainneacha a chruthú a thuilleadh ag baint úsáide as ainmneacha ranga, rud a ligeann dóibh, ar a seal, roghnóirí a scríobh bunaithe ar eilimintí HTML dúchasacha, rud a chuireann deireadh leis an ngá atá le patrúin ainm ranga CSS saintreoracha. Trí dheireadh a chur leis an ngá atá le bainistiú ainmneacha ranga, is féidir le @scope an eagla a bhaineann le CSS i dtionscadail mhóra a mhaolú.
Bunús Úsáid
Chun tús a chur leis, cuir an riail @scope le do CSS agus cuir isteach roghnóir fréimhe a ndéanfar na stíleanna a scóipeáil:
@scóip (
Mar sin, mar shampla, dá mbeimis ag scóipeáil stíleanna d’eilimint
@scóip (nav) { a { /* Nasc stíleanna laistigh de raon feidhme nav */ }
a: gníomhach {/* Stíleanna naisc ghníomhacha */ }
a:active ::roimh {/* Nasc gníomhach le eilimint bhréagach le haghaidh stílithe breise */ }
@media (uas-leithead: 768px) { a { /* Coigeartuithe sofhreagracha */ } } }
Ní gné úrnua é seo, leis féin. Mar sin féin, is féidir an dara argóint a chur leis an scóip chun teorainn níos ísle a chruthú, rud a shainíonn go héifeachtach pointí tosaigh agus críochphointí an raon feidhme.
/* Ní chuirfear na stíleanna i bhfeidhm ar eilimint ar bith taobh istigh de ul */ @scope (nav) go (ul) { a { cló-mhéid: 14px; } }
Tugtar scópáil donut ar an gcleachtas seo, agus tá go leor cineálacha cur chuige ann a d’fhéadfaí a úsáid, lena n-áirítear sraith de roghnóirí comhchosúla an-sonrach atá cúpláilte go docht le struchtúr DOM, roghnóir :nach bréige, nó sanntar ainmneacha ranga ar leith do eilimintí laistigh den
Conclúid Oibríonn creataí fóntais-an chéad CSS, mar Tailwind, go maith le haghaidh fréamhshamhla agus tionscadail níos lú. Laghdaíonn a gcuid buntáistí go tapa, áfach, nuair a úsáidtear iad i dtionscadail níos mó a bhaineann le níos mó ná cúpla forbróir. Tá forbairt tosaigh ag éirí ró-chasta le blianta beaga anuas, agus ní haon eisceacht é CSS. Cé nach leigheas iomlán é riail @scope, féadfaidh sé an gá atá le huirlisiú casta a laghdú. Nuair a úsáidtear é in ionad nó in éineacht le hainmniú ranga straitéiseach, féadann @scope é a dhéanamh níos éasca agus níos spraíúla CSS inchothaithe a scríobh. Tuilleadh Léitheoireachta
CSS @scope (MDN) “CSS @scope”, Juan Diego Rodríguez (CSS-Tricks) Nótaí Eisiúna Firefox 146 (Firefox) Tacaíocht Brabhsálaí (CanIUse) Creataí CSS Coitianta (Staid CSS 2024) “An “C” i CSS: Cascáidigh”, Thomas Yip (CSS-Tricks) Réamhrá BEM (Faigh BEM)
