Mgbe ị na-amụta ụkpụrụ nke CSS bụ isi, a na-akụziri mmadụ ka ọ dee modular, reusable, na nkọwa ụdị iji hụ na a na-ejigide ya. Mana mgbe ndị mmepe na-etinye aka na ngwa ụwa n'ezie, ọ na-adịkarị ka ọ gaghị ekwe omume ịgbakwunye njirimara UI na-enweghị ụdị na-adaba na mpaghara ndị a na-atụghị anya ya. Okwu a na-emekarị snowball n'ime akaghị aka na-emezu onwe ya; ụdị ndị a na-atụ anya ka ha na otu akụkụ ma ọ bụ klaasị na-amalite igosi ebe ha na-esoghị. Nke a na-amanye onye nrụpụta imepụta ọbụna ndị ahọpụtara ka ọ ga-ewepụ ụdịdị ndị agbapụtagoro, nke na-emebizi ụdịdị ụwa niile na mberede, na ihe ndị ọzọ. Mgbakọ aha klaasị siri ike, dị ka BEM, bụ otu ihe ngwọta maka okwu a. Usoro BEM (Mgbochi, Element, Modifier) bụ usoro ahaziri ahazi nke na-akpọ klas CSS iji hụ na nrụgharị na nhazi n'ime faịlụ CSS. Ịkpọ aha mgbakọ dị ka nke a nwere ike ibelata ikike ọgụgụ isi site n'ịkwado asụsụ ngalaba iji kọwaa ihe na steeti ha, ma ọ bụrụ na emejuputa ya nke ọma, nwere ike ime ka ụdị maka nnukwu ngwa dị mfe iji nọgide na-enwe. N'ime ụwa n'ezie, Otú ọ dị, ọ bụghị mgbe niile ka ọ na-arụ ọrụ dị otú ahụ. Ihe ndị na-ebute ụzọ nwere ike ịgbanwe, yana mgbanwe, mmejuputa a na-aghọghị ekwekọ. Obere mgbanwe na nhazi HTML nwere ike ịchọ ọtụtụ ndegharị aha klaasị CSS. Site na ngwa n'ihu na-emekọrịta ihe nke ukwuu, aha klaasị na-agbaso ụkpụrụ BEM nwere ike ịdị ogologo na enweghị ike (dịka ọmụmaatụ, ngwa-user-overview__status - bụ-authenticating), ma ghara ịrapagidesi ike n'iwu aha aha na-emebi usoro nke usoro ahụ, si otú ahụ na-ewepụ uru ya. Nyere ihe ịma aka ndị a, ọ bụghị ihe ijuanya na ndị mmepe atụgharịala na frameworks, Tailwind bụ usoro CSS kachasị ewu ewu. Kama ịgbalị ịlụ ọgụ dị ka agha a na-apụghị imeri emeri n'etiti ụdị, ọ dị mfe ịhapụ CSS Cascade ma jiri ngwaọrụ na-ekwe nkwa ịnọpụ iche. Ndị mmepe na-adaberekwu na Utilities Olee otú anyị si mara na ụfọdụ ndị na-emepụta ihe na-achọsi ike ịzere ụdị ndị na-adịghị mma? Ọ bụ ịrị elu nke ngwá ọrụ n'ihu "oge a" - dị ka CSS-in-JS frameworks - e mere kpọmkwem maka nzube ahụ. Ịrụ ọrụ na ụdị ndị dịpụrụ adịpụ nke gbadoro anya na akụkụ ụfọdụ nwere ike ịdị ka ume ikuku. Ọ na-ewepụ mkpa ịkpọ aha ihe - ka bụ otu n'ime ọrụ ndị a na-akpọ asị na nke na-ewe oge n'ihu - ma na-enye ohere ka ndị mmepe na-arụpụta ihe n'aghọtaghị nke ọma ma ọ bụ na-erite uru nke ihe nketa CSS. Mana ịchụpụ CSS Cascade na-abịa na nsogbu nke ya. Dịka ọmụmaatụ, idepụta ụdị na Javascript chọrọ nhazi nhazi dị arọ ma na-edugakarị n'ụdị na-emekọ ihe ọnụ na akara akụrụngwa ma ọ bụ HTML. Kama echebara mgbakọ aha nke ọma echiche, anyị na-ekwe ka ihe nrụpụta rụọ ọrụ iji mepụta ndị na-ahọpụta na ihe nchọpụta maka anyị (dịka ọmụmaatụ, .jsx-3130221066), chọrọ ndị mmepe ka ha na-agbasokwa asụsụ pseudo ọzọ n'ime ya. (Dị ka a ga - asị na ibu nghọta nke nghọta ihe mmetụta akụrụngwa gị niile na - eme ezughi oke!) Ịwepụta ọzọ ọrụ nke ịkpọ klaasị ka ọ bụrụ ngwá ọrụ pụtara na nbibi bụ isi na-ejikarị ụdị ngwa a chịkọtara maka mmepe, kama ịwelite njirimara ihe nchọgharị ala nke na-akwado nbibi ndụ, dị ka Ngwa Mmepụta. Ọ fọrọ nke nta ka ọ bụrụ na anyị kwesịrị ịmepụta ngwaọrụ iji mebie ngwaọrụ anyị na-eji akọwa ihe webụ na-enyebu - ihe niile maka ịgbanarị "mgbu" nke ide ọkọlọtọ CSS. N'ụzọ dị mma, atụmatụ CSS ọgbara ọhụrụ ọ bụghị nanị na-eme ka ịde ọkọlọtọ CSS dịkwuo mfe kamakwa na-enye ndị mmepe dịka anyị nnukwu ike iji jikwaa cascade ma mee ka ọ rụọ ọrụ maka anyị. CSS Cascade Layers bụ ezigbo ihe atụ, mana enwere ihe ọzọ na-enweta enweghị nlebara anya na-eju anya - ọ bụ ezie na nke ahụ na-agbanwe ugbu a na n'oge na-adịbeghị anya ghọrọ Baseline dakọtara. CSS @scope At-Rule A na m ewere CSS @scope at-rule ka ọ bụrụ ọgwụgwọ nwere ike ịgwọ ụdị ụdị nchekasị kpatara anyị kpuchiri, nke na-adịghị amanye anyị imebi uru webụ ala ala maka abstractions na mgbakwunye ngwá ọrụ. "The @scope CSS na-iwu na-enyere gị aka ịhọrọ ihe dị iche iche na obere osisi DOM, na-elekwasị anya ihe ndị na-edoghị anya na-edeghị ndị na-ahọrọ kpọmkwem nke siri ike ịkwụsị, na-enweghị ijikọ ndị na-ahọrọ gị nke ọma na nhazi DOM."
N'ikwu ya n'ụzọ ọzọ, anyị nwere ike iji ụdị ndị dịpụrụ adịpụ rụọ ọrụ n'oge ụfọdụ n'achụghị ihe nketa, ịchụpụ, ma ọ bụ ọbụna nkewa nke nchegbu.nke ahụ bụ ụkpụrụ nduzi na-eme ogologo oge nke mmepe n'ihu. Na mgbakwunye, ọ nwere mkpuchi ihe nchọgharị mara mma. N'ezie, Firefox 146 gbakwunyere nkwado maka @scope na Disemba, na-eme ya Baseline dakọtara na nke mbụ. Nke a bụ ntụnyere dị mfe n'etiti bọtịnụ na-eji ụkpụrụ BEM na iwu @scope:
Iwu @scope na-enye ohere maka nkenke na obere mgbagwoju anya. Onye nrụpụta ahụ adịkwaghị mkpa ịmepụta oke site na iji aha klaasị, nke, n'aka nke ya, na-enye ha ohere ide ndị nhọpụta dabere na ihe HTML obodo, si otú ahụ na-ewepụ mkpa maka usoro aha klaasị CSS. Site na iwepu mkpa njikwa aha klaasị, @scope nwere ike ibelata egwu metụtara CSS na nnukwu ọrụ.
Isi ojiji
Iji malite, tinye iwu @scope na CSS gị wee fanye onye na-ahọrọ mgbọrọgwụ nke ụdị ga-emetụta:
@scope (
Yabụ, dịka ọmụmaatụ, ọ bụrụ na anyị ga-ewepụta ụdịdị na ihe
@scope (nav) { Ụdị njikọ {/* n'ime oghere ụgbọ mmiri */ }
a: arụ ọrụ {/* Ụdị njikọ na-arụ ọrụ */ }
a: arụ ọrụ :: tupu {/* Njikọ na-arụ ọrụ na pseudo-element maka mmezi styling */}
@media (nke kacha obosara: 768px) { a {/* mmezi nzaghachi */ } } }
Nke a, n'onwe ya, abụghị ihe mgbagwoju anya. Otú ọ dị, enwere ike ịgbakwunye arụmụka nke abụọ na njedebe iji mepụta oke ala, na-akọwapụta mmalite mmalite na njedebe njedebe nke ọma.
/* Ihe ọ bụla dị n'ime ul agaghị enwe ụdị nke etinyere */ @scope (nav) ruo (ul) { a { nha font: 14px; } }
A na-akpọ omume a donut scoping, na e nwere ọtụtụ ụzọ mmadụ nwere ike iji, gụnyere usoro ndị yiri ya, ndị na-ahọrọ nke ọma jikọtara ya na usoro DOM, a :not pseudo-selector, ma ọ bụ na-ekenye aha klas kpọmkwem na ihe dị n'ime
Mmechi Utility-nke mbụ CSS frameworks, dị ka Tailwind, na-arụ ọrụ nke ọma maka prototyping na obere oru ngo. Uru ha na-ebelata ngwa ngwa, Otú ọ dị, mgbe ejiri ya na nnukwu ọrụ metụtara ihe karịrị di na nwunye nke mmepe. Mmepe n'ihu na-arị elu na-arịwanye elu n'ime afọ ole na ole gara aga, CSS abụghịkwa ihe ọzọ. Ọ bụ ezie na iwu @scope abụghị ọgwụgwọ-ihe niile, ọ nwere ike ibelata mkpa ngwa ọrụ dị mgbagwoju anya. Mgbe ejiri ya n'ọnọdụ, ma ọ bụ n'akụkụ klaasị ahaziri ahazi, @scope nwere ike ime ka ọ dịkwuo mfe ma bụrụ ihe na-atọ ụtọ ide CSS na-echekwa. Ọgụgụ ọzọ
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Tricks) Ihe ndetu mwepụta Firefox 146 (Firefox) Nkwado ihe nchọgharị (CanIUse) Frameworks CSS ama ama (State nke CSS 2024) "C" na CSS: Cascade, Thomas Yip (CSS-Tricks) Okwu Mmalite BEM (Nweta BEM)
