Menguasai CSS Cascade: Katakan selamat tinggal kepada kekacauan dan merangkul kawalan! Artikel ini akan meneroka cara menggunakan ciri CSS baru untuk mengawal cascades untuk menulis lebih banyak kod CSS yang ringkas dan cekap. Pada masa lalu, gaya dari sumber yang berbeza sering membuat cascades sukar untuk mengurus dan akhirnya menghasilkan kod berlebihan. Walaupun dengan kaedah seperti ITCSS dan BEM, kita masih menghadapi cabaran yang ditimbulkan oleh Cascades, seperti keperluan untuk mengawal kedudukan pernyataan @import
dengan tepat atau terpaksa menggunakan !important
Nasib baik, beberapa alat baru telah keluar, membolehkan kita mengawal lata secara berkesan.

Drive :where
pemilih pseudo
:where
pseudo-selectror membolehkan kami untuk menghapuskan kekhususan pemilih supaya ia hanya lebih tinggi daripada gaya lalai ejen pengguna, tanpa mengira pesanan pemuatan CSS. Ini bermakna bahawa kekhususan pemilih sebenarnya sifar, yang sangat berguna untuk komponen tujuan umum.
Sebagai contoh, gunakan :where
untuk menentukan gaya meja biasa:
: di mana (jadual) {
latar belakang warna: tan;
}
Salin selepas log masuk
Walaupun gaya meja lain ditakrifkan sebelum ini:
Jadual {
latar belakang warna: hotpink;
}
: di mana (jadual) {
latar belakang warna: tan;
}
Salin selepas log masuk
Warna latar belakang meja masih tan
kerana :where
menghilangkan kekhususan pemilih. Ini menjadikan :where
sempurna untuk CSS Reset.
:where
's Brother Selector :is
mempunyai kesan yang bertentangan:
Khususnya :is()
kelas pseudo ditentukan oleh khusus parameter yang paling istimewa. Oleh itu, pemilih yang ditulis dengan :is()
tidak semestinya mempunyai kepakaran yang sama seperti pemilih setara yang ditulis tanpa :is()
. - Spesifikasi Tahap 4 Selektor
Teruskan dengan contoh sebelumnya:
: adalah (jadual) {
--TBL-BGC: Orange;
}
Jadual {
--tbl-bgc: tan;
}
: di mana (jadual) {
--tbl-bgc: hotpink;
latar belakang warna: var (-tbl-bgc);
}
Salin selepas log masuk
Warna latar belakang meja akan menjadi tan
kerana :is
mempunyai khusus yang sama dengan table
, dan table
terletak di belakangnya. Tetapi jika kita mengubahnya menjadi:
: adalah (jadual, .c-tbl) {
--TBL-BGC: Orange;
}
Salin selepas log masuk
Warna latar belakang akan menjadi orange
kerana :is
mempunyai berat yang sama seperti pemilih yang paling istimewa.c .c-tbl
.
Contoh: Komponen jadual yang boleh dikonfigurasikan
Mari buat komponen meja dengan HTML berikut:
Seterusnya, kami membungkus .c-tbl
di :where
pemilih dan tambahkan sudut bulat:
: di mana (.c-tbl) {
Sempadan-keruntuhan: berasingan;
Sempadan-jarak: 0;
meja berlabuh: auto;
lebar: 99.9%;
}
Salin selepas log masuk
Sel -sel meja menggunakan gaya yang berbeza:
: di mana (.c-tbl thead th) {
/ * ... */
}
: di mana (.c-tbl tbody td) {
/ * ... */
}
Salin selepas log masuk
Oleh kerana sudut bulat dan border-collapse: separate
, kita perlu menambah gaya tambahan:
: di mana (.c-tbl tr td: first-of-type) {
/ * ... */
}
/ * ... */
Salin selepas log masuk
Sekarang kita boleh membuat variasi komponen jadual dengan menyuntik gaya lain sebelum atau selepas gaya umum (faedah dari :where
penghapusan khusus):
.c-tbl-purple th {
Latar Belakang berwarna: HSL (330, 50%, 40%)
}
/ * ... */
Salin selepas log masuk
CSS Custom Properties
Kami akan menggunakan harta data-component
untuk menentukan komponen:
Gaya generik akan digunakan untuk semua contoh komponen, dan gaya untuk contoh komponen tertentu akan dimasukkan ke dalam kelas umum, dan sifat tersuai komponen umum digunakan.
: di mana ([data-komponen = "jadual"]) {
/ * ... */
}
.c-tbl-purple {
/ * ... */
}
Salin selepas log masuk
Dalam komponen yang sama, setiap harta CSS menunjuk kepada harta tersuai. Atribut yang perlu bertindak terhadap unsur-unsur kanak-kanak (seperti border-color
) ditentukan pada akar komponen umum:
: di mana ([data-komponen = "jadual"]) {
--TBL-HUE: 200;
/ * ... */
}
: di mana ([data-komponen = "jadual"] td) {
Border-color: var (-tbl-bdc);
}
Salin selepas log masuk
Ciri -ciri lain boleh ditetapkan nilai statik atau dikonfigurasikan menggunakan sifat tersuai. Jika menggunakan sifat tersuai, ingatlah untuk menentukan nilai lalai untuk digunakan apabila kelas variasi hilang.
: di mana ([data-komponen = "jadual"]) {
latar belakang warna: var (-tbl-bgc, telus);
/ * ... */
}
Salin selepas log masuk
Kita boleh menggunakan sifat tersuai untuk mengawal penjajaran lajur dan lebar:
: di mana ([data-komponen = "jadual"] tr> *: nth-of-type (1)) {
Teks-Align: var (-CA1, awal);
/ * ... */
}
Salin selepas log masuk
Sekarang, mari buat gaya komponen tertentu, menggunakan kelas biasa .c-tbl
:
.c-tbl {
--TBL-HUE: 330;
}
Salin selepas log masuk
Kami hanya perlu mengemas kini hartanah tanpa menulis CSS baru! Tukar harta untuk mengemas kini warna jadual.
Kita boleh menulis gaya yang lebih kompleks, seperti jalur zebra:
.c-tbl tr: nth-child (walaupun) td {
--tbl-td-bgc: hsl (var (-tbl-hue), var (-tbl-sat), 95%);
}
Salin selepas log masuk
Tambahkan parameter menggunakan data-attribute
lain
Kami boleh menambah harta data-param
lain untuk menambah lebih banyak parameter:
Kemudian, dalam CSS kita boleh menggunakan pemilih harta untuk memadankan keseluruhan perkataan dalam senarai parameter. Sebagai contoh, barisan jalur zebra:
[data-komponen = "jadual"] [data-param ~ = "zebrarow"] tr: nth-child (walaupun) td {
--tbl-td-bgc: var (-tbl-zebra-bgc);
}
Salin selepas log masuk
Atau lajur jalur zebra:
[data-komponen = "jadual"] [data-param ~ = "zebracol"] td: nth-of-type (ganjil) {
--tbl-td-bgc: var (-tbl-zebra-bgc);
}
Salin selepas log masuk
Lapisan Cascade
Alat terakhir untuk mengawal Cascade ialah "Lapisan Cascade". Pada masa ini, ia adalah ciri eksperimen yang boleh diakses di Safari atau Chrome untuk membolehkan bendera #enable-cascade-layers
.
Lapisan cascade membolehkan kami menyuntik helaian gaya dalam susunan tertentu. Struktur mudah adalah seperti berikut:
@Layer Generic, komponen;
Salin selepas log masuk
Ini menentukan susunan lapisan. Pertama terdapat gaya umum, maka gaya khusus komponen.
Walaupun gaya komponen ditulis sebelum gaya umum, lapisan gaya komponen masih berlaku:
Komponen @layer {
badan {
latar belakang warna: Lightseagreen;
}
}
@layer generik {
badan {
latar belakang warna: tomato;
}
}
Salin selepas log masuk
Meringkaskan
:where
dan :is
Pseudo-Selecters membolehkan kita mengawal kekhususan data-attribute
CSS Cascade bukan lagi musuh, tetapi alat yang dapat kita kendalikan.
Imej dari Stephen Leonardi di Unsplash
Atas ialah kandungan terperinci Don ' t melawan lata, mengawalnya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!