Namni tokko yeroo seera bu’uuraa CSS bu’uuraa baratu, kunuunfamuu mirkaneessuuf akkaataa moojuularii, irra deebi’amee itti fayyadamuu danda’uu fi ibsituu barreessuu barsiifama. Garuu yeroo developers application addunyaa dhugaa wajjin hirmaatan, yeroo baayyee osoo styles gara naannoo hin yaadamnetti hin dhangala'in features UI dabaluun akka hin danda'amne itti dhagahama. Dhimmi kun yeroo baay’ee gara loop of guutuutti snowballs ta’a; akkaataawwan ti’ooriidhaan elementii ykn gita tokkoof daangaa qaban bakka isaan hin taanetti mul’achuu jalqabu. Kunis, qopheessaan akkaataawwan dhangala'an irra darbuuf filannoowwan adda ta'an akka uumuuf dirqisiisa, isaanis sana booda akka tasaa akkaataawwan addunyaa irra darbanii fi kkf. Konveenshiniin maqaa gitaa jajjaboo, kan akka BEM, dhimma kanaaf furmaata ti’oorii keessaa tokko. Malli BEM (Block, Element, Modifier) mala sirnaa gita CSS moggaasuun irra deebiin itti fayyadamuu fi caasaa faayilii CSS keessaa mirkaneessuudha. Konveenshiniin moggaasa akka kanaa afaan domeenii fayyadamuun elementoota fi haala isaanii ibsuun fe'iinsa hubannoo hir'isuu danda'a, yoo sirritti hojiirra oole immoo, akkaataawwan aplikeeshiniiwwan gurguddoof salphaatti kunuunfamuu danda'a. In the real world, however, it doesn’t always work out like that. Dursi kennamuu jijjiiramuu danda’a, jijjiirama waliin hojiirra oolmaan wal hin simne ta’a. Jijjiiramni xixiqqoo caasaa HTML irratti fooyya'iinsa maqaa gita CSS hedduu barbaadu danda'a. Appilikeeshiniiwwan fuulduraa wal-qunnamtii olaanaa qabaniin, maqaaleen gitaa akkaataa BEM hordofan dheeraa fi kan hin qabne ta’uu danda’u (fkn, app-user-overview__status--is-authenticating), fi seera moggaasaa guutummaatti hordofuu dhabuun caasaa sirnichaa cabsa, kanaanis faayidaa isaa ni haqa. Qormaata kana yoo ilaalle, developers gara frameworks tti garagaluun isaanii nama hin ajaa’ibu, Tailwind framework CSS baay’ee beekamaadha. Lola addaa kan hin mo'amne fakkaatu akkaataawwan gidduutti loluuf yaaluun irra, CSS Cascade irratti harka kennachuu fi meeshaalee adda baafamuu guutuu wabii ta'an fayyadamuun salphaadha. Developers Caalaatti Utilities Irratti Hirkatan Developers tokko tokko cascaded styles irraa fagaachuuf fedhii akka qaban akkamitti beekna? Innis ka’umsa meeshaalee fuulduraa “ammayyaa” ti — akkuma CSS-in-JS frameworks — kaayyoo sanaaf addatti qophaa’e. Akkaataa adda baafamee fi qaamolee adda ta’aniif cimsee kan daangeffame waliin hojjechuun qilleensa qulqulluu fudhachuu fakkaachuu danda’a. Barbaachisummaa wantoota maqaa dhahuu ni maqsa — ammallee hojiiwwan fuulduraa baay’ee jibbamaa fi yeroo fudhatan keessaa tokko — fi developers faayidaa dhaala CSS guutummaatti osoo hin hubatin ykn osoo hin fayyadamin oomishaa akka ta’an hayyama. Garuu CSS Cascade ditching gochuun rakkoo mataa isaa qaba. Fakkeenyaaf, akkaataawwan JaavaScript keessatti qindeessuun qindeessuu ijaarsaa ulfaataa kan barbaadu yoo ta'u yeroo baay'ee akkaataawwan mallattoo qaamaa ykn HTML wajjin haala nama hin gammachiifneen wal-makanitti geessuudha. Konveenshiniiwwan moggaasaa of eeggannoodhaan ilaalamanii mannaa, meeshaaleen ijaarsaa filattotaa fi adda baastoota ofumaan akka nuuf maddisiisan ni hayyamna (fkn, .jsx-3130221066), kunis qopheessitoonni afaan sobaa kan biraa ofuma isaatii fi ofuma isaatiin akka hordofan gaafata. (Akka waan fe’iin hubannoo (cognitive load) hubachuu waan fayyadamni component kee hundi hojjetuEffects duraan gahaa hin taaneetti!) Hojii gitaalee gara meeshaatti moggaasuu dabalataan abstraaktii gochuun, sirreeffamni bu'uuraa yeroo baay'ee gosoota aplikeeshinii murtaa'oo misoomaaf qindaa'anitti daangeffama jechuudha, amaloota dhalootaa biraawzari kanneen sirreeffama kallattiin deeggaran, kan akka Meeshaalee Developer fayyadamuu irra. Meeshaalee meeshaalee itti fayyadamaa jirru waan weebiin duraan kennu abstraaktii gochuuf meeshaalee sirreessuu qabna jechuun ni danda’ama — kun hundi “dhukkubbii” CSS istaandaardii barreessuu irraa baqachuuf jecha. Akka carraa ta’ee, amaloonni CSS ammayyaa barreessuu CSS sadarkaa isaa eeggate caalaatti akka jijjiiramu gochuu qofa osoo hin taane, developers akka keenyaa humna guddaa caalu kan kennu cascade bulchuu fi akka nuuf hojjetu gochuuf. CSS Cascade Layers fakkeenya guddaadha, garuu amala biraa xiyyeeffannoo dhabuu ajaa’ibaa argatu jira — sun amma dhiheenya kana Baseline wajjin walsimu waan ta’eef jijjiiramaa jiraatus. CSS @scope At-Rule jedhamuun beekama CSS @scope at-rule akka qoricha ta’uu danda’utti gosa yaaddoo akkaataa-dhangala’aa-induced kan nuti uwwifneef, kan faayidaa weebii dhalootaa abstractions fi meeshaalee ijaarsa dabalataaf akka balaadhaaf nu hin dirqisiifneettin ilaala. “Seeraan @scope CSS at-rule elementoota muka xiqqaa DOM murtaa’e keessatti filachuuf si dandeessisa, filattota garmalee adda ta’an kanneen irra darbuun rakkisaa ta’an osoo hin barreessin, fi filattota kee caasaa DOM wajjin garmalee osoo hin walqabsiisin elementoota sirritti irratti xiyyeeffachuu.”— MDN
Jecha biraatiin, dhaala, kaskaadii, ykn illee addaan baasuu bu’uuraa yaaddoowwanii osoo hin aarsaa godhin, haalawwan adda baafamanii wajjin haalawwan adda ta’an keessatti hojjechuu dandeenyakan yeroo dheeraaf qajeelfama misooma fuulduraa ta’ee ture. Dabalataan, uwwisa biraawzarii gaarii qaba. Dhugaa dubbachuuf, Firefox 146 Muddee keessa @scope'f deeggarsa dabalee, yeroo jalqabaaf Baseline waliin akka walsimu taasiseera. Kunoo walmadaalchisuun salphaan qaree shaakala BEM fayyadamu fi seera @scope gidduu jiru: jedhamuun beekama jedhu
jedhu
Seerri @scope walxaxiinsa xiqqaa ta'een sirrii ta'uu hayyama. Developer kana booda maqaa gitaa fayyadamuun daangaa uumuu hin barbaachisu, kunis, dabaree isaatiin, filattota qaamolee HTML dhalootaa irratti hundaa'uun akka barreessan isaan dandeessisa, kanaanis barbaachisummaa shaakala maqaa gitaa CSS ajajaa dhabamsiisa. Barbaachisummaa bulchiinsa maqaa gitaa salphaatti balleessuun, @scope sodaa CSS pirojektoota gurguddoo keessatti walqabatee jiru salphisuu danda'a.
Fayyadama Bu’uuraa
Jalqabuuf, seera @scope gara CSS keetti dabali fi filannoo hundee akkaataawwan itti bal'inaan itti galchi:
@scope (
Kanaafuu, fakkeenyaaf, yoo akkaataawwan gara elementii
@daangaa (nav) { . a { /* Akkaataawwan walqabsiisaa bal'ina nav keessaa */ } .
a:active { /* Akkaataa walqabsiisaa socho'aa */ } .
a:active::before { /* Hidhaa socho'aa qaama fakkeessaa wajjin akkaataa dabalataaf */ }
@miidiyaa (bal'ina-guddaa: 768px) { a { /* Sirreeffama deebii kennuu */ } . } . } .
Kun, mataa isaatiin, waan lafa qabsiisu miti. Haa ta’u malee, falmiin lammaffaan daangaa gadii uumuuf bal’ina irratti dabalamuun ni danda’ama, kunis qabxii jalqabaa fi xumura bal’aa bu’a qabeessa ta’een ibsa.
/* Elementiin a ul keessa jiru kamiyyuu akkaataa hojii irra oolu hin qabaatu */ . @scope (nav) hanga (ul) { . a { . guddina qubee: 14px; } . } .
Shaakala kun doonaatii scoping jedhama, fi malawwan namni tokko fayyadamuu danda'u hedduutu jiru, kanneen keessaa tartiiba filattota walfakkaataa, baay'ee adda ta'an kanneen caasaa DOM waliin cimsee walqabsiisan, :not pseudo-selector, ykn maqaa gitaa murtaa'aa elementoota
Xumura Utility-first CSS frameworks, kan akka Tailwind, prototyping fi pirojektoota xixiqqoodhaaf akka gaariitti hojjetu. Faayidaan isaanii dafee hir’ata, haa ta’u malee, pirojektoota gurguddoo misoomsitoota lamaa fi lamaa ol hirmaachisu keessatti yeroo itti fayyadaman. Front-end development has become increasingly overcomplicated in the last few years, and CSS is no exception. Seerri @scope qoricha hunda ta’uu baatus, barbaachisummaa meeshaalee walxaxaa hir’isuu danda’a. Yeroo bakka, ykn moggaasa gita tarsiimoo cinatti fayyadamu, @scope CSS kunuunfamuu danda'u barreessuu salphaa fi bashannansiisaa taasisuu danda'a. Dubbisa Dabalataa
CSS @bal'ina (MDN) . “CSS @scope”, Juuwaan Diyeegoo Roodriigeez (CSS-Tricks) . Yaadannoowwan Gadhiifamuu Firefox 146 (Firefox) . Deeggarsa Biraawzarii (CanIUse) . Bu'uuraalee CSS Beekamoo (Haala CSS 2024) . ““C” CSS: Kaskaadii keessatti”, Toomaas Yiip (CSS-Tricks) . Seensa BEM (BEM argadhu) .
