Lokacin koyon ƙa'idodin CSS na asali, ana koya wa mutum rubuta na zamani, sake amfani da su, da salon siffantawa don tabbatar da kiyayewa. Amma lokacin da masu haɓakawa suka shiga cikin aikace-aikacen ainihin duniya, galibi ana jin ba zai yuwu a ƙara fasalulluka na UI ba ba tare da salo suna yawo cikin wuraren da ba a yi niyya ba. Wannan fitowar sau da yawa kankara dusar ƙanƙara a cikin madauki mai cika kai; Salon da aka keɓe a ƙa'idar zuwa kashi ɗaya ko aji sun fara nunawa a inda ba nasu ba. Wannan yana tilasta wa mai haɓakawa ya ƙirƙiri wasu takamaiman zaɓaɓɓu don ƙetare salon da aka ɗora, wanda ba zato ba tsammani ya mamaye salon duniya, da sauransu. Ƙididdigar sunaye masu tsattsauran ra'ayi, kamar BEM, sune mafita ɗaya na ka'idar wannan batu. Hanyar BEM (Block, Element, Modifier) hanya ce mai tsauri ta sanya suna azuzuwan CSS don tabbatar da sake amfani da tsari a cikin fayilolin CSS. Ƙididdigar suna irin wannan na iya rage nauyin fahimi ta hanyar yin amfani da harshen yanki don kwatanta abubuwa da jiharsu, kuma idan an aiwatar da su daidai, na iya sa salo don manyan aikace-aikace cikin sauƙi don kiyayewa. A cikin duniyar gaske, duk da haka, ba koyaushe yana aiki kamar haka ba. Abubuwan fifiko na iya canzawa, kuma tare da canji, aiwatarwa ya zama rashin daidaituwa. Ƙananan canje-canje ga tsarin HTML na iya buƙatar sake fasalin sunan ajin CSS da yawa. Tare da aikace-aikacen gaba-gaba mai ma'amala sosai, sunayen aji da ke bin tsarin BEM na iya zama tsayi da rashin ƙarfi (misali, app-user-overview__status - is-athenticating), kuma rashin cikakken bin ƙa'idodin suna yana karya tsarin tsarin, don haka ya hana amfaninsa. Ganin waɗannan ƙalubalen, ba abin mamaki ba ne cewa masu haɓakawa sun juya zuwa tsarin tsarin, Tailwind shine mafi mashahuri tsarin CSS. Maimakon ƙoƙarin yin yaƙin abin da ke kama da ƙayyadaddun yaƙin da ba za a iya cin nasara ba tsakanin salo, yana da sauƙi a daina kan CSS Cascade da amfani da kayan aikin da ke ba da tabbacin keɓewa. Masu Haɓakawa Sun Dogara Akan Abubuwan Utilities Ta yaya muka san cewa wasu masu haɓakawa suna sha'awar guje wa salon da ba su da kyau? Yana da haɓaka kayan aiki na "zamani" na gaba - kamar tsarin CSS-in-JS - wanda aka tsara musamman don wannan dalili. Yin aiki tare da keɓantattun salo waɗanda aka keɓance su zuwa takamaiman abubuwan da aka gyara na iya zama kamar numfashin iska. Yana kawar da buƙatun suna - har yanzu ɗayan ayyuka na gaba da aka fi ƙi da cin lokaci - kuma yana ba masu haɓaka damar haɓaka ba tare da cikakkiyar fahimta ko amfani da fa'idodin gadon CSS ba. Amma cirewar CSS Cascade yana zuwa da nasa matsalolin. Misali, tsara salo a cikin JavaScript yana buƙatar tsarin ginawa mai nauyi kuma sau da yawa yana haifar da salo mai banƙyama tare da alamar abun ciki ko HTML. Maimakon a yi la'akari da ƙa'idodin suna a hankali, muna ba da damar gina kayan aikin don ƙirƙirar masu zaɓe da masu ganowa a gare mu (misali, .jsx-3130221066), yana buƙatar masu haɓakawa su ci gaba da kasancewa da wani yare mai ƙima a ciki da kanta. (Kamar dai nauyin fahimi na fahimtar abin da duk abubuwan da ake amfani da su na kayan aikin ku ba su riga sun isa ba!) Ƙarin ƙaddamar da aikin sanya azuzuwan suna zuwa kayan aiki yana nufin cewa gyara kuskuren asali sau da yawa ana iyakance shi zuwa takamaiman nau'ikan aikace-aikacen da aka haɗa don haɓakawa, maimakon yin amfani da fasalulluka na burauza na asali waɗanda ke goyan bayan gyara kai tsaye, kamar Kayan aikin Haɓakawa. Yana da kusan kamar muna buƙatar haɓaka kayan aiki don gyara kayan aikin da muke amfani da su don ƙaddamar da abin da gidan yanar gizon yanar gizon ya rigaya ya ba da - duk don guje wa "zafi" na rubuta daidaitaccen CSS. Sa'ar al'amarin shine, fasalulluka na CSS na zamani ba wai kawai suna sanya daidaitaccen rubutu na CSS ya zama mafi sassauƙa ba amma har ma suna ba masu haɓakawa kamar mu ƙarin iko mai yawa don sarrafa cascade da sa ya yi mana aiki. CSS Cascade Layers babban misali ne, amma akwai wani fasalin da ke samun rashin kulawa mai ban mamaki - kodayake wannan yana canzawa yanzu da kwanan nan ya zama mai jituwa na Baseline. CSS @scope At-Rule Na yi la'akari da CSS @scope a-ka'idar don zama mai yuwuwar magani ga nau'in damuwa mai haifar da salo-salo da muka rufe, wanda baya tilasta mana yin sulhu da fa'idodin gidan yanar gizo na asali don abstractions da ƙarin kayan aikin gini. "Ƙa'idar @scope CSS yana ba ku damar zaɓar abubuwa a cikin ƙayyadaddun ƙayyadaddun DOM, abubuwan da aka yi niyya daidai ba tare da rubuta takamaiman takamaiman zaɓaɓɓu waɗanda ke da wahala a soke su ba, kuma ba tare da haɗa masu zaɓin ku ba sosai ga tsarin DOM."
A wasu kalmomi, za mu iya yin aiki tare da keɓantaccen salo a cikin takamaiman yanayi ba tare da sadaukar da gado ba, tarwatsawa, ko ma ainihin rarrabuwar damuwa.wanda ya kasance ka'idar jagora mai tsawo na ci gaba na gaba. Bugu da ƙari, yana da kyakkyawar ɗaukar hoto. A zahiri, Firefox 146 ya ƙara tallafi don @scope a cikin Disamba, yana mai da shi Baseline mai jituwa a karon farko. Anan akwai sauƙin kwatanta tsakanin maɓalli ta amfani da tsarin BEM tare da @scope:
Dokar @scope tana ba da izini don daidaito tare da ƙarancin rikitarwa. Mai haɓakawa baya buƙatar ƙirƙirar iyakoki ta amfani da sunayen aji, wanda, bi da bi, yana ba su damar rubuta zaɓaɓɓu bisa abubuwan HTML na asali, ta haka za su kawar da buƙatar tsarin sunan ajin CSS. Ta hanyar cire buƙatar sarrafa sunan aji kawai, @scope na iya rage fargabar da ke tattare da CSS a manyan ayyuka.
Asalin Amfani
Don farawa, ƙara ƙa'idar @scope zuwa CSS ɗin ku kuma saka tushen zaɓin waɗanne salo za a keɓance su:
@scope (
Don haka, alal misali, idan za mu keɓance salo zuwa wani abin
@scope (nav) { a {/* Salon hanyar haɗin gwiwa tsakanin iyakokin kewayawa */ }
a: m {/* Salon hanyar haɗin gwiwa mai aiki */ }
a: aiki :: kafin {/* Haɗin kai mai aiki tare da kayan ƙira don ƙarin salo */ }
@media (mafi girman nisa: 768px) { a {/* gyare-gyare masu amsawa */ } } }
Wannan, a kashin kansa, ba sifa ce mai tushe ba. Koyaya, ana iya ƙara gardama ta biyu zuwa ga iyawar don ƙirƙirar ƙananan iyaka, yadda ya kamata ke ayyana maƙasudin farawa da ƙarshen iyakar.
/* Duk wani abu a cikin ul ba za a yi amfani da salo ba */ @scope (nav) zuwa (ul) { a { girman font: 14px; } }
Ana kiran wannan aikin donut scoping, kuma akwai hanyoyi da yawa da mutum zai iya amfani da su, ciki har da jerin kamanni, musamman takamaiman zaɓaɓɓu haɗe da tsarin DOM, a :ba mai zaɓe ba, ko sanya takamaiman sunayen aji zuwa abubuwa a cikin
/* Duk wani abin ko a cikin ko Kwatanta waccan sigar da aka sarrafa ba tare da ka'idar @scope ba, inda mai haɓakawa dole ne ya “sake saita” salo zuwa abubuwan da suka dace: main a {
girman font: 14px;
} babban p {
tsayin layi: 16px;
launi: duhu;
} babban gefe a,
main nav a {
girman font: gado; /* ko duk abin da tsoho ya kamata ya zama */
} babban gefe p,
main nav {
layin-tsawo: gado; /* ko duk abin da tsoho ya kamata ya zama */
launi: gado; /* ko takamaiman launi */
} Duba misali mai zuwa. Shin kuna lura da yadda yake da sauƙi a kai hari ga wasu zaɓaɓɓun gida yayin keɓance wasu?
Dubi misalin Pen @scope [forked] na Blake Lundquist.
Yi la'akari da yanayin inda ake buƙatar yin amfani da salo na musamman ga abubuwan da ba su da tushe a cikin sassan yanar gizo. Lokacin shigar da abun ciki cikin sashin yanar gizo, abun cikin ya zama wani ɓangare na Shadow DOM, amma har yanzu yana gaji salo daga takaddar iyaye. Mai haɓakawa na iya son aiwatar da salo daban-daban dangane da abin da ke cikin gidan yanar gizon da ke cikin:
A cikin wannan misalin, mai haɓakawa na iya son img-katin mai amfani {
iyaka-radius: 50%;
nisa: 40px;
tsawo: 40px;
}
} Ƙarin Fa'idodi
Akwai ƙarin hanyoyin da @scope zai iya cire buƙatar sarrafa aji ba tare da yin amfani da kayan aiki ko sunayen ajin da aka samar da JavaScript ba. Misali, @scope yana buɗe yuwuwar sauƙaƙe zuriyar kowane zaɓi, ba kawai sunayen aji ba: /* Abubuwan div kawai tare da maɓallin yara kai tsaye ana haɗa su a cikin tushen tushen */
@scope (div: yana da (> maɓalli)) {
p {
girman font: 14px;
}
} Kuma ana iya yin su a cikin gida, ƙirƙirar scopes a cikin scopes:
@scope (babban) {
p {
girman font: 16px;
launi: baki;
}
@scope (sashe) {
p {
girman font: 14px;
launi: blue;
}
@scope (.highlight) {
p {
bango-launi: rawaya;
font-nauyin: m;
}
}
}
} Ƙari ga haka, ana iya yin la'akari da ƙa'idar tushen a cikin sauƙi a cikin ka'idar @scope: /* Ya shafi abubuwan da ke cikin sassan sashin yara kai tsaye, amma yana tsayawa a kowane gefe kai tsaye wanda ke cikin waɗannan sassan */
@scope (babban> sashe) zuwa (:scope> gefe) {
p {
bango-launi: haske blue;
launi: blue;
}
/* Ya shafi abubuwan ul waɗanda suke 'yan uwan kai tsaye na tushen tushen */
:scope + ul {
jerin-style: babu;
}
} The @scope at-rule kuma yana gabatar da sabon girman kusanci zuwa ƙayyadaddun ƙayyadaddun CSS. A cikin CSS na al'ada, lokacin da masu zaɓi biyu suka dace da kashi ɗaya, mai zaɓin da ke da takamaiman takamaiman ya yi nasara. Tare da @scope, lokacin da abubuwa biyu suna da takamaiman ƙayyadaddun ƙayyadaddun ƙayyadaddun ƙayyadaddun bayanai, wanda tushen sa ya fi kusa da abin da ya dace ya yi nasara. Wannan yana kawar da buƙatar soke tsarin iyaye ta hanyar haɓaka ƙayyadaddun abubuwa da hannu, tunda abubuwan da ke ciki a zahiri sun ƙetare salon abubuwan waje.
Jane Doe
Jane Doe
Kammalawa Utility-tsarin CSS na farko, kamar Tailwind, suna aiki da kyau don samfuri da ƙananan ayyuka. Amfanin su yana raguwa da sauri, duk da haka, idan aka yi amfani da su a cikin manyan ayyuka da suka ƙunshi sama da ma'aurata biyu. Ci gaban gaba-gaba ya zama mai rikitarwa a cikin ƴan shekarun da suka gabata, kuma CSS ba banda. Duk da yake ka'idar @scope ba magani ba ce, yana iya rage buƙatar hadadden kayan aiki. Lokacin da aka yi amfani da shi a madadin, ko tare da dabarun ajin suna, @scope na iya sauƙaƙa da ƙarin daɗi don rubuta CSS mai kiyayewa. Karin Karatu
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Tricks) Bayanan Sakin Firefox 146 (Firefox) Taimakon Browser (CanIUse) Shahararrun Tsarin CSS (Jihar CSS 2024) "C" a cikin CSS: Cascade, Thomas Yip (CSS-Tricks) Gabatarwa BEM (Samu BEM)
