Dema ku prensîbên CSS-ya bingehîn fêr dibin, meriv tê fêr kirin ku meriv şêwazên modular, ji nû ve bi kar anîn, û raveker binivîsîne da ku domdariyê misoger bike. Lê gava ku pêşdebir bi serîlêdanên cîhana rastîn re têkildar dibin, bi gelemperî ne gengaz e ku meriv taybetmendiyên UI-yê bêyî şêwazên ku di nav deverên nedilxwaz de diherikin zêde bikin. Ev pirsgirêk pir caran berfê dikeve nav xelekek xweser; şêwazên ku ji hêla teorîkî ve li yek hêmanek an çînek têne veqetandin, li cîhê ku ne aîdê wan in dest pê dikin. Ev zorê dide pêşdebiran ku hilbijêrên hê bêtir taybetî biafirîne da ku şêwazên derketine paşde bixe, yên ku dûv re bi xeletî şêwazên gerdûnî û hwd. Peymanên navên çîna hişk, wekî BEM, yek çareseriyek teorîkî ye ji bo vê pirsgirêkê. Metodolojiya BEM (Block, Element, Modifier) rêgezek birêkûpêk e ku navên çînên CSS-ê ye da ku ji nû vebikaranîna û avahiyek di nav pelên CSS de misoger bike. Peymanên binavkirinê yên bi vî rengî dikare bi karanîna zimanê domainê ji bo danasîna hêman û rewşa wan barkirina zanînê kêm bike, û ger rast were bicîh kirin, dikare şêwazên ji bo sepanên mezin domdar hêsantir bike. Di cîhana rastîn de, lêbelê, ew her gav wusa nabe. Pêşîn dikarin biguherin, û bi guhertinê re, pêkanîn nakokî dibe. Guhertinên piçûk ên strukturên HTML-ê dikarin gelek guhertoyên navên pola CSS hewce bikin. Digel serîlêdanên pêşîn ên pir înteraktîf, navên polê yên li gorî şêwaza BEM-ê dikarin dirêj û bêkêmasî bibin (mînak, app-bikarhêner-overview__status--es-teyîsandin), û bi tevahî negirêdan rêzikên navdêran avahiya pergalê dişkîne, bi vî rengî feydeyên wê înkar dike. Ji ber van dijwariyan, ne ecêb e ku pêşdebiran berê xwe dane çarçoweyan, Tailwind çarçoweya CSS-ê ya herî populer e. Li şûna ku hûn şer bikin ya ku dixuye ku di navbera şêwazan de şerekî taybetmendiyek neserkeftî ye, hêsantir e ku meriv dev ji CSS Cascade berde û amûrên ku îzolasyona bêkêmasî garantî dike bikar bîne. Pêşdebir Zêdetir Li Ser Karûbaran Disekinin Em çawa dizanin ku hin pêşdebiran dilgiran in ku ji şêwazên kaskadî dûr bikevin? Ew bilindbûna amûra pêşîn a "modern" e - mîna çarçoveyên CSS-in-JS - ku bi taybetî ji bo wê armancê hatî çêkirin. Karkirina bi şêwazên veqetandî yên ku bi hûrgulî ji pêkhateyên taybetî re têne veqetandin dikare wekî bêhnek nû xuya bike. Ew hewcedariya bi navkirina tiştan radike - hîn jî yek ji wan karên pêşîn ên herî nefret û demdirêj - û dihêle ku pêşdebiran bêyî ku bi tevahî feydeyên mîrasiya CSS-ê têbigihîjin an jî bikar bînin hilberdar bin. Lê qutkirina CSS Cascade bi pirsgirêkên xwe re tê. Mînakî, berhevkirina şêwazên di JavaScript-ê de pêdivî bi veavakirinên avakirina giran heye û bi gelemperî rê dide şêwazên ku bi awakî nebaş bi nîşankirina pêkhateyan an HTML-ê re tevlihev dibin. Li şûna ku bi baldarî lihevhatinên navdêran were fikirîn, em destûrê didin amûrên çêkirinê ku ji bo me hilbijêr û nasnameyan bixweber biafirînin (mînak, .jsx-3130221066), ku ji pêşdebiran re hewce dike ku di nav xwe de bi zimanekî din ê pseudo-yê re tevbigerin. (Mîna ku barkirina zanînê ya têgihîştina tiştê ku hemî karanîna pêkhateyên we dikinEffects jixwe ne bes be!) Zêdetir abstrakkirina karê navkirina çînan li amûrkirinê tê vê wateyê ku xeletkirina bingehîn bi gelemperî bi guhertoyên serîlêdana taybetî yên ku ji bo pêşkeftinê hatine berhev kirin têne sînordar kirin, ji bilî karanîna taybetmendiyên geroka xwecihî yên ku piştgirîkirina xeletkirina zindî piştgirî dikin, wek Amûrên Pêşdebir. Hema hema mîna ku em hewce ne ku amûran pêş bixin da ku em amûrên ku em bikar tînin ji bo jêbirina tiştê ku tevn berê peyda dike rast bikin - hemî ji bo ku em ji "êşa" nivîsandina CSS-ya standard dûr bikevin. Xwezî, taybetmendiyên CSS-ya nûjen ne tenê nivîsandina CSS-ya standard maqûltir dike, lê di heman demê de hêzek mezin dide pêşdebirên mîna me ku kaskadê birêve bibin û wê ji me re bixebitin. CSS Cascade Layers mînakek hêja ye, lê taybetmendiyek din heye ku kêmasiyek ecêb distîne - her çend ku ew nuha diguhezîne ku ew di van demên dawî de bûye Bingehîn lihevhatî. CSS @scope At-Rule Ez CSS @scope at-rule wekî dermanek potansiyel dihesibînim ji bo cûrbecûr xemgîniya ku me pê vekiriye, ya ku me neçar nake ku em ji avantajên weba xwemalî ji bo abstractions û amûrên çêkirina zêde tawîz bidin. "@scope CSS at-rule rê dide we ku hûn hêmanên di jêrdarên DOM-ê yên taybetî de hilbijêrin, hêmanên bi rastî bêyî nivîsandina hilbijêrên zêde-taybet ên ku ji holê rakirina wan zehmet e, û bêyî ku hilbijêrên xwe pir hişk bi avahiya DOM-ê ve girêbidin, armanc bikin."- MDN.
Bi gotinek din, em dikarin di rewşên taybetî de bi şêwazên veqetandî re bixebitin bêyî ku qurbana mîras, kavilbûn, an tewra veqetandina bingehîn a fikaran.ku prensîbek rêber a demdirêj a pêşkeftina pêşîn e. Zêdeyî, ew xwedan vegirtina geroka hêja ye. Bi rastî, Firefox 146 di Kanûna Pêşîn de piştgirî ji bo @scope zêde kir, ku ew ji bo yekem carê Baseline lihevhatî kir. Li vir berhevokek hêsan a di navbera bişkokek ku bi karanîna modela BEM-ê li hember qaîdeya @scope bikar tîne heye:
Rêbaza @scope rê dide rastbûna bi tevliheviya kêmtir. Pêşdebir êdî hewce nake ku bi karanîna navên polê sînoran biafirîne, ku, di encamê de, dihêle ku ew hilbijêran li ser bingeha hêmanên HTML-a xwemalî binivîsin, bi vî rengî hewcedariya pêşnumayên navên pola CSS-ê yên pêşniyarî ji holê rakin. Bi tenê rakirina hewcedariya rêveberiya navê polê, @scope dikare di projeyên mezin de tirsa ku bi CSS-ê ve girêdayî ye kêm bike.
Bikaranîna bingehîn
Ji bo ku dest pê bikin, qaîdeya @scope li CSS-ya xwe zêde bikin û hilbijêrek root-ê têxin nav kîjan şêwazên ku dê werin veqetandin:
@scope (
Ji ber vê yekê, mînakî, heke em şêwazên hêmanek
@scope (nav) { a { /* Şêweyên girêdanê di nav çarçoveya nav de */}
a:çalak { /* Şêweyên girêdana çalak */ }
a:active::bere { /* Girêdana çalak bi pseudo-hêmanek ji bo şêwaza zêde */ }
@media (max-width: 768px) { a { /* Guherandinên bersivdar */} } }
Ev yek bi serê xwe ne taybetmendiyek bingehîn e. Lêbelê, argumanek duyemîn dikare li çarçovê were zêdekirin da ku sînorek jêrîn biafirîne, bi bandor xalên destpêk û dawiya çarçovê diyar bike.
/* Her hêmanek di hundurê ul de dê şêwazên ku têne sepandin nebin */ @scope (nav) heta (ul) { a { font-size: 14px; } }
Ji vê pratîkê re scoping donut tê gotin, û çend nêzîkatî hene ku mirov dikare bikar bîne, di nav de rêzek hilbijarkên mîna, pir taybetî yên ku bi strûktûra DOM-ê ve girêdayî ne, :ne pseudo-hilbijêrek, an jî danîna navên pola taybetî ji hêmanên re di nav
Encam Çarçoveyên CSS-ya yekem-karsaz, wekî Tailwind, ji bo prototîp û projeyên piçûktir baş dixebitin. Feydeyên wan zû kêm dibin, lêbelê, dema ku di projeyên mezin de ku ji çend pêşdebiran zêdetir tevlê dibin têne bikar anîn. Pêşveçûna pêşîn di van çend salên dawî de her ku diçe tevlihevtir bûye, û CSS ne îstîsna ye. Dema ku qaîdeya @scope ne dermanek e, ew dikare hewcedariya amûrên tevlihev kêm bike. Dema ku li şûna, an li kêleka navê pola stratejîk were bikar anîn, @scope dikare nivîsandina CSS-ya domdar hêsantir û xweştir bike. Bêtir Xwendina
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Tricks) Têbînîyên berdana Firefox 146 (Firefox) Piştgiriya Gerokê (CanIUse) Çarçoveyên CSS yên populer (Rewşa CSS 2024) "C" di CSS de: Cascade", Thomas Yip (CSS-Tricks) Danasîna BEM (BEM bistînin)
