Nalika sinau prinsip CSS dhasar, siji diwulang nulis gaya modular, bisa digunakake maneh, lan deskriptif kanggo njamin maintainability. Nanging nalika pangembang melu aplikasi ing donya nyata, asring ora bisa nambah fitur UI tanpa gaya bocor menyang wilayah sing ora dikarepake. Jeksa Agung bisa ngetokake iki asring snowballs menyang daur ulang timer nepaki; gaya sing miturut teori scoped kanggo siji unsur utawa kelas wiwit nuduhake munggah ngendi padha ora dadi kagungane. Iki meksa pangembang nggawe pamilih sing luwih spesifik kanggo ngatasi gaya sing bocor, sing banjur ora sengaja ngilangi gaya global, lan liya-liyane. Konvensi jeneng kelas kaku, kayata BEM, minangka salah sawijining solusi teoretis kanggo masalah iki. Metodologi BEM (Block, Element, Modifier) minangka cara sistematis kanggo menehi jeneng kelas CSS kanggo njamin bisa digunakake maneh lan struktur ing file CSS. Konvensi jeneng kaya iki bisa nyuda beban kognitif kanthi nggunakake basa domain kanggo njlèntrèhaké unsur lan negara, lan yen dileksanakake kanthi bener, bisa nggawe gaya kanggo aplikasi gedhe luwih gampang dijaga. Ing donya nyata, Nanging, iku ora tansah bisa metu kaya sing. Prioritas bisa diganti, lan kanthi owah-owahan, implementasine dadi ora konsisten. Owah-owahan cilik ing struktur HTML bisa mbutuhake akeh revisi jeneng kelas CSS. Kanthi aplikasi front-end sing interaktif banget, jeneng kelas kanthi pola BEM bisa dadi dawa lan ora bisa digunakake (contone, app-user-overview__status--is-authenticating), lan ora netepi aturan penamaan kanthi lengkap, ngrusak struktur sistem, mula negasi keuntungane. Amarga tantangan kasebut, ora kaget yen pangembang wis ngowahi kerangka kerja, Tailwind minangka kerangka CSS sing paling populer. Tinimbang nyoba nglawan apa sing katon kaya perang spesifik sing ora bisa dimenangi ing antarane gaya, luwih gampang nyerah ing CSS Cascade lan nggunakake alat sing njamin isolasi lengkap. Pangembang Lean More On Utilities Kepiye carane ngerti manawa sawetara pangembang kepengin ngindhari gaya sing kaskade? Iku munggah saka perkakas ngarep "modern" - kaya frameworks CSS-in-JS - dirancang khusus kanggo tujuan kasebut. Nggarap gaya terisolasi sing rapet karo komponen tartamtu bisa katon kaya ambegan hawa seger. Mbusak kebutuhan kanggo menehi jeneng - isih dadi salah sawijining tugas ngarep sing paling disengiti lan akeh wektu - lan ngidini pangembang dadi produktif tanpa ngerti utawa nggunakake keuntungan warisan CSS. Nanging ditching CSS Cascade teka karo masalah dhewe. Umpamane, nyipta gaya ing JavaScript mbutuhake konfigurasi mbangun sing abot lan asring ndadékaké gaya sing ora cocog karo markup komponen utawa HTML. Tinimbang konvènsi jeneng kasebut kanthi teliti, kita ngidini mbangun alat kanggo autogenerate pamilih lan pengenal kanggo kita (contone, .jsx-3130221066), mrintahake pangembang kanggo tetep karo durung liyane pseudo-basa ing dhewe. (Kaya beban kognitif kanggo mangerteni apa kabeh komponen sampeyan nggunakakeEffects durung cukup!) Luwih abstrak tugas menehi jeneng kelas kanggo perkakas tegese debugging dhasar asring diwatesi kanggo versi aplikasi tartamtu sing disusun kanggo pangembangan, tinimbang nggunakake fitur browser asli sing ndhukung debugging langsung, kayata Alat Pangembang. Iku meh kaya kita kudu ngembangake alat kanggo debug alat sing digunakake kanggo abstrak apa sing wis diwenehake web - kabeh kanggo mlayu saka "nyeri" nulis CSS standar. Untunge, fitur CSS modern ora mung nggawe nulis CSS standar luwih fleksibel nanging uga menehi pangembang kaya kita luwih akeh kekuwatan kanggo ngatur kaskade lan bisa digunakake kanggo kita. CSS Cascade Layers minangka conto sing apik, nanging ana fitur liyane sing ora bisa digatekake - sanajan saiki wis ganti amarga saiki kompatibel karo Baseline. CSS @scope At-Rule Aku nganggep CSS @scope at-rule minangka obat potensial kanggo jinis gaya-bocor-induced kuatir sing wis kita tutupi, sing ora meksa kita kompromi kaluwihan web asli kanggo abstraksi lan alat tambahan. "Aturan CSS @scope ngidini sampeyan milih unsur ing subtree DOM tartamtu, nargetake unsur kanthi tepat tanpa nulis pamilih sing spesifik banget sing angel ditimpa, lan tanpa nyambungake pamilih sampeyan kanthi rapet karo struktur DOM." - MDN
Ing tembung liyane, kita bisa nggarap gaya sing terisolasi ing kasus tartamtu tanpa ngorbanake warisan, runtun, utawa malah misahake masalah.sing wis dadi prinsip panuntun dawa kanggo pangembangan front-end. Kajaba iku, nduweni jangkoan browser sing apik banget. Nyatane, Firefox 146 nambahake dhukungan kanggo @scope ing Desember, nggawe Baseline kompatibel kanggo pisanan. Mangkene perbandingan prasaja antarane tombol nggunakake pola BEM versus aturan @scope:
Aturan @scope ngidini kanggo presisi karo kurang kerumitan. Pangembang ora perlu maneh nggawe wates nggunakake jeneng kelas, kang, siji, ngidini kanggo nulis pamilih adhedhasar unsur HTML native, mangkono mbusak perlu kanggo preskriptif CSS pola jeneng kelas. Kanthi mung ngilangi kabutuhan manajemen jeneng kelas, @scope bisa nyuda rasa wedi sing ana gandhengane karo CSS ing proyek gedhe.
Panggunaan dhasar
Kanggo miwiti, tambahake aturan @scope menyang CSS lan lebokake pemilih root kanggo gaya sing bakal ditrapake:
@scope (
Dadi, contone, yen kita kudu nyakup gaya menyang elemen
@scope (nav) { a { /* Gaya pranala ing lingkup nav */ }
a:aktif { /* Gaya pranala aktif */ }
a:active::before { /* Tautan aktif karo unsur pseudo kanggo gaya ekstra */ }
@media (jembaré maksimal: 768px) { a { /* Pangaturan responsif */ } } }
Iki, dhewe, ora fitur groundbreaking. Nanging, argumen kapindho bisa ditambahake menyang ruang lingkup kanggo nggawe wates ngisor, kanthi efektif nemtokake titik wiwitan lan pungkasan ruang lingkup.
/* Saben unsur ing ul ora bakal duwe gaya sing ditrapake */ @scope (nav) nganti (ul) { a { ukuran font: 14px; } }
Praktek iki diarani scoping donat, lan ana sawetara pendekatan sing bisa digunakake, kalebu serangkaian pamilih sing padha lan spesifik sing digandhengake karo struktur DOM, a: ora pseudo-selector, utawa menehi jeneng kelas tartamtu kanggo unsur ing
Kesimpulan Kerangka CSS sing dadi utilitas, kayata Tailwind, bisa digunakake kanthi apik kanggo prototipe lan proyek sing luwih cilik. Nanging, keuntungan kasebut cepet suda, nalika digunakake ing proyek sing luwih gedhe sing melu luwih saka sawetara pangembang. Pangembangan front-end saya tambah rumit ing sawetara taun kepungkur, lan CSS ora terkecuali. Nalika aturan @scope dudu obat kabeh, bisa nyuda kabutuhan alat sing rumit. Yen digunakake ing panggonan, utawa bebarengan karo jeneng kelas strategis, @scope bisa nggawe luwih gampang lan luwih nyenengake kanggo nulis CSS maintainable. Wacan Salajengipun
CSS @scope (MDN) "CSS @scope", Juan Diego Rodríguez (CSS-Tricks) Cathetan Rilis Firefox 146 (Firefox) Dhukungan Browser (CanIUse) Kerangka CSS Populer (Negara CSS 2024) "C" ing CSS: Cascade", Thomas Yip (CSS-Tricks) Pengenalan BEM (Entuk BEM)
