Don ' t melawan lata, mengawalnya!

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;
}

Walaupun gaya meja lain ditakrifkan sebelum ini:

 Jadual {
  latar belakang warna: hotpink;
}

: di mana (jadual) {
  latar belakang warna: tan;
}

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);
}

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;
}

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%;
}

Sel -sel meja menggunakan gaya yang berbeza:

 : di mana (.c-tbl thead th) {
  / * ... */
}
: di mana (.c-tbl tbody td) {
  / * ... */
}

Oleh kerana sudut bulat dan border-collapse: separate , kita perlu menambah gaya tambahan:

 : di mana (.c-tbl tr td: first-of-type) {
  / * ... */
}
/ * ... */

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%)
}
/ * ... */

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 {
  / * ... */
}

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);
}

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);
  / * ... */
}

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);
  / * ... */
}

Sekarang, mari buat gaya komponen tertentu, menggunakan kelas biasa .c-tbl :

 .c-tbl {
  --TBL-HUE: 330;
}

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%);
}

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);
}

Atau lajur jalur zebra:

 [data-komponen = "jadual"] [data-param ~ = "zebracol"] td: nth-of-type (ganjil) {
  --tbl-td-bgc: var (-tbl-zebra-bgc);
}

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;

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;
  }
}

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!