Nalika diajar prinsip CSS dasar, hiji diajar nulis modular, reusable, sarta gaya deskriptif pikeun mastikeun maintainability. Tapi nalika pamekar janten kalibet sareng aplikasi dunya nyata, sering karasa teu mungkin pikeun nambihan fitur UI tanpa gaya bocor ka daérah anu teu dihaja. masalah ieu mindeng snowballs kana loop timer minuhan; gaya nu sacara téoritis scoped kana hiji unsur atawa kelas mimiti muncul dimana maranéhna teu milik. Ieu maksakeun pamekar pikeun nyiptakeun pamilih anu langkung spésifik pikeun nimpa gaya anu bocor, anu teras-terasan nimpa gaya global, sareng saterasna. Konvénsi ngaran kelas anu kaku, sapertos BEM, mangrupikeun solusi téoritis pikeun masalah ieu. Métodologi BEM (Blok, Unsur, Modifier) mangrupikeun cara sistematis pikeun nami kelas CSS pikeun mastikeun kabisa dianggo deui sareng struktur dina file CSS. Konvénsi ngaran kawas kieu bisa ngurangan beban kognitif ku leveraging basa domain pikeun ngajelaskeun elemen sarta kaayaan maranéhanana, sarta lamun dilaksanakeun leres, bisa nyieun gaya pikeun aplikasi badag gampang pikeun ngajaga. Di dunya nyata, kumaha oge, teu salawasna jalan kaluar kawas éta. Prioritas tiasa robih, sareng kalayan parobihan, palaksanaan janten teu konsisten. Parobahan leutik kana struktur HTML bisa merlukeun loba révisi ngaran kelas CSS. Kalayan aplikasi hareup-tungtung anu interaktif pisan, nami kelas anu nuturkeun pola BEM tiasa janten panjang sareng teu tiasa dianggo (contona, app-user-overview__status--is-authenticating), sareng henteu sapinuhna patuh kana aturan pangaranan ngarecah struktur sistem, ku kituna ngabatalkeun mangpaatna. Dibikeun tantangan ieu, éta teu heran pamekar geus tos ka frameworks, Tailwind keur kerangka CSS pang populerna. Tinimbang nyobian ngalawan naon sigana kawas perang spésifisitas unwinnable antara gaya, leuwih gampang nyerah dina CSS Cascade sarta ngagunakeun parabot nu ngajamin isolasi lengkep. Pamekar langkung condong kana Utiliti Kumaha urang terang yén sababaraha pamekar hoyong ngahindarkeun gaya cascaded? Ieu naékna "modern" tooling hareup-tungtung - kawas frameworks CSS-in-JS - dirancang husus pikeun tujuan éta. Gawe sareng gaya terasing nu scoped pageuh kana komponén husus bisa sigana kawas napas tina hawa seger. Éta ngaleungitkeun kabutuhan pikeun ngaranan hal-hal - masih salah sahiji tugas payuneun anu paling dibenci sareng nyéépkeun waktos - sareng ngamungkinkeun pamekar janten produktif tanpa ngartos atanapi ngungkit kauntungan tina warisan CSS. Tapi ditching nu CSS Cascade hadir kalawan masalah sorangan. Contona, nyusun gaya dina JavaScript merlukeun konfigurasi ngawangun beurat tur mindeng ngabalukarkeun gaya awkwardly intermingling kalawan markup komponén atawa HTML. Gantina konvénsi ngaran dianggap taliti, urang ngidinan ngawangun parabot pikeun autogenerate pamilih jeung identifiers pikeun urang (misalna, .jsx-3130221066), merlukeun pamekar tetep nepi ka acan sejen pseudo-basa di na sorangan. (Saolah-olah beban kognitif ngartos naon anu dianggo ku sadayana komponén anjeun henteu acan cekap!) Salajengna abstraksi tugas ngaran kelas kana tooling hartina debugging dasar mindeng dibatesan kana versi aplikasi husus disusun pikeun pangwangunan, tinimbang leveraging fitur browser asli nu ngarojong live debugging, kayaning Alat pamekar. Ieu ampir kawas urang kudu ngamekarkeun parabot pikeun debug parabot urang nuju ngagunakeun abstrak naon web geus nyadiakeun - kabeh demi kabur ti "nyeri" nulis CSS baku. Untungna, fitur CSS modern henteu ngan ukur ngajantenkeun tulisan CSS standar langkung fleksibel tapi ogé masihan pamekar sapertos urang kakuatan anu langkung ageung pikeun ngatur kaskade sareng ngajantenkeun éta dianggo pikeun urang. CSS Cascade Layers mangrupikeun conto anu saé, tapi aya fitur sanés anu kirang héran perhatian - sanaos éta robih ayeuna parantos janten cocog sareng Baseline. CSS @scope At-Rule Kuring nganggap CSS @scope at-rule janten ubar poténsial pikeun jinis gaya-bocor-ngainduksi kahariwang anu kami katutupan, anu henteu maksakeun urang badami kauntungan wéb asli pikeun abstraksi sareng perkakas ngawangun tambahan. "The @scope CSS at-rule ngamungkinkeun anjeun pikeun milih elemen dina subtrees DOM husus, nargétkeun elemen persis tanpa nulis selectors overly-spésifik anu hésé override, sarta tanpa gandeng selectors Anjeun teuing pageuh kana struktur DOM." - MDN
Dina basa sejen, urang tiasa dianggo kalayan gaya terasing dina instansi husus tanpa ngorbankeun warisan, cascading, atawa malah separation dasar tina masalah.nu geus lila-ngajalankeun prinsip pituduh ngembangkeun hareup-tungtung. Tambih Deui, éta gaduh cakupan browser anu saé. Nyatana, Firefox 146 nambihan dukungan pikeun @scope dina bulan Désémber, ngajantenkeun Baseline cocog pikeun kahiji kalina. Ieu perbandingan saderhana antara tombol anu nganggo pola BEM versus aturan @scope:
Aturan @scope ngamungkinkeun pikeun akurasi sareng pajeulitna kirang. pamekar nu euweuh perlu nyieun wates ngagunakeun ngaran kelas, nu, kahareupna ngamungkinkeun aranjeunna nulis selectors dumasar kana elemen HTML asli, kukituna ngaleungitkeun kabutuhan prescriptive CSS pola ngaran kelas. Ku ngan saukur ngaleungitkeun kabutuhan manajemén ngaran kelas, @scope tiasa ngirangan kasieun anu aya hubunganana sareng CSS dina proyék ageung.
Pamakéan Dasar
Pikeun ngamimitian, tambahkeun aturan @scope kana CSS anjeun sareng selapkeun pamilih akar pikeun gaya anu bakal dijantenkeun:
@wengkuan (
Janten, contona, upami urang ngawengku gaya kana unsur
@wengkuan (nav) { a { /* Gaya Tumbu dina lingkup nav */ }
a:aktif { /* Gaya Tumbu aktip */ }
a:active:: before { /* Tautan aktip kalawan pseudo-element pikeun gaya tambahan */ }
@media (lebar maksimum: 768px) { a { /* Pangaluyuan responsif */ } } }
Ieu, sorangan, sanes fitur groundbreaking. Sanajan kitu, argumen kadua bisa ditambahkeun kana wengkuan pikeun nyieun wates handap, éféktif nangtukeun titik mimiti jeung tungtung wengkuan urang.
/* Naon waé unsur di jero ul moal gaduh gaya anu diterapkeun */ @scope (nav) ka (ul) { a { ukuran font: 14px; } }
Prakték ieu disebut scoping donat, sareng aya sababaraha pendekatan anu tiasa dianggo, kalebet séri pamilih anu sami sareng spésifik anu digandeng pageuh kana struktur DOM, a: teu pseudo-selector, atanapi masihan nami kelas khusus kana elemen dina
kacindekan Kerangka CSS anu munggaran pikeun utiliti, sapertos Tailwind, tiasa dianggo pikeun prototyping sareng proyék anu langkung alit. Mangpaatna gancang ngirangan, kumaha ogé, nalika dianggo dina proyék-proyék anu langkung ageung ngalibetkeun langkung ti sababaraha pamekar. Pangwangunan hareup-tungtung parantos janten langkung rumit dina sababaraha taun ka pengker, sareng CSS sanés iwal. Sanaos aturan @scope sanés ubar sadayana, éta tiasa ngirangan kabutuhan alat anu kompleks. Lamun dipaké dina tempat, atawa barengan ngaran kelas strategis, @scope bisa nyieun leuwih gampang jeung leuwih senang nulis CSS maintainable. Bacaan salajengna
CSS @wengkuan (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Trik) Catetan Pelepasan Firefox 146 (Firefox) Rojongan Browser (CanIUse) Kerangka CSS populér (State of CSS 2024) "The "C" dina CSS: Cascade", Thomas Yip (CSS-Trik) Perkenalan BEM (Kéngingkeun BEM)
