Rumah > hujung hadapan web > tutorial css > Don ' t melawan lata, mengawalnya!

Don ' t melawan lata, mengawalnya!

William Shakespeare
Lepaskan: 2025-03-15 10:13:12
asal
835 orang telah melayarinya

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.

Jangan melawan cascade, mengawalnya!

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:

Salin selepas log masuk
Salin selepas log masuk

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:

Salin selepas log masuk
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan