Menguruskan Corak Komponen Sistem Reka Bentuk dengan Lapisan Cascade CSS

Artikel ini membincangkan cara menggunakan lapisan CSS Cascade untuk meningkatkan kebolehcapaian, kecekapan, kemudahan penggunaan dan kemudahan pemahaman komponen.

Saya bersemangat tentang organisasi kod dan mendapati bahawa cascade adalah cara terbaik untuk mengatur kod anda secara eksplisit kerana ia mengikuti perintah baca Cascade secara langsung. Lebih baik lagi, selain membantu organisasi "peringkat atas", cascades juga boleh bersarang, membolehkan kita menulis gaya yang lebih tepat berdasarkan cascades.

Satu-satunya kelemahan adalah imaginasi anda-tidak ada yang dapat menghalang kami dari CSS yang terlalu banyak. Untuk menjadi jelas, anda mungkin akan berfikir bahawa apa yang akan saya tunjukkan adalah satu tahun yang berlebihan. Tetapi saya fikir saya telah menemui titik keseimbangan, menyimpannya mudah dan teratur, dan gembira untuk berkongsi penemuan saya.

Komposisi mod komponen CSS

mari kita gunakan butang sebagai contoh untuk meneroka corak penulisan komponen menggunakan CSS. Butang adalah salah satu komponen yang paling popular di hampir setiap perpustakaan komponen. Terdapat sebab untuk populariti ini, kerana butang boleh digunakan dalam pelbagai kes penggunaan termasuk:

melakukan tindakan, seperti membuka laci,
menavigasi ke bahagian yang berlainan dari UI, dan
menyimpan beberapa negeri, seperti fokus atau hover.

dan butang datang dalam pelbagai bentuk penandaan yang berbeza, seperti

, <button></button> dan input[type="button"]. Jika anda percaya, terdapat lebih banyak cara untuk membuat butang. <a></a>

yang paling penting, butang yang berbeza melakukan fungsi yang berbeza dan biasanya digayakan dengan sewajarnya supaya butang satu operasi dibezakan dari butang operasi lain. Butang juga bertindak balas terhadap perubahan keadaan, seperti ketika mereka melayang, bergerak, dan fokus. Jika anda pernah menulis CSS menggunakan sintaks BEM, kita boleh berfikir sepanjang idea yang sama dalam konteks lapisan cascade.

Baiklah, mari tulis kod sekarang. Khususnya, mari buat beberapa jenis butang. Kami akan mulakan dengan kelas

yang boleh kami tetapkan kepada mana -mana elemen yang kami mahu tetapkan sebagai butang! Kami sudah tahu bahawa butang datang dalam pelbagai bentuk tag yang berbeza, jadi kelas

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

biasa adalah cara yang paling boleh diguna semula dan boleh diperpanjang untuk memilih satu atau semua butang ini.

.button .button menggunakan cascades

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

di sini, kita boleh memasukkan lapisan cascade pertama kami! Ingat, sebab kami mahu lapisan cascade terlebih dahulu ialah ia membolehkan kami menetapkan susunan bacaan CSS Cascade ketika menilai gaya. Kita boleh memberitahu CSS untuk menilai satu lapisan terlebih dahulu, kemudian lapisan lain, kemudian lapisan lain - semuanya mengikut urutan yang kita mahu. Ini adalah ciri yang luar biasa yang memberi kita kuasa super untuk mengawal gaya penyemak imbas yang digunakan untuk "menang".

Kami namakan lapisan ini components kerana butang adalah komponen. Alasan saya suka namanya adalah bahawa ia cukup generik untuk menyokong komponen lain yang akan kita tambahkan pada masa depan apabila memutuskan untuk memperluaskan sistem reka bentuk. Ia berskala dengan kami sambil mengekalkan pemisahan yang baik dari gaya lain yang kami tulis pada masa akan datang yang mungkin tidak khusus untuk komponen.

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

Cascades bersarang

di mana perkara mendapat sedikit pelik ada di sini. Adakah anda tahu bahawa anda boleh bersarang lapisan Cascade di dalam kelas ? Ini adalah perkara yang penuh. Jadi, melihat ini, kita boleh memperkenalkan lapisan baru di dalam kelas yang sudah terletak di dalam lapisannya sendiri. Inilah yang saya maksudkan: .button Akhirnya, ini adalah bagaimana penyemak imbas menafsirkan lapisan dalaman:

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Jawatan ini bukan hanya tentang gaya bersarang, jadi saya hanya ingin mengatakan bahawa perbatuan anda mungkin berbeza -beza apabila anda melakukannya. Semak artikel terbaru Andy Bell mengenai menggunakan gaya bersarang dengan berhati -hati.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Struktur gaya

Setakat ini, kami telah menubuhkan kelas

dalam lapisan lata yang direka untuk menampung sebarang jenis komponen dalam sistem reka bentuk kami. Di dalam ini

adalah satu lagi lapisan cascade yang digunakan untuk memilih pelbagai jenis butang yang mungkin kita hadapi dalam tag. Kami telah membincangkan sebelum ini bahawa butang itu

, .button atau .button, iaitu bagaimana kita memilih untuk gaya setiap jenis secara individu. <button></button> <input> kita boleh menggunakan fungsi <a></a> pseudo-selector, yang sama dengan berkata: "Jika ini

adalah :is() unsur .button, maka gaya-gaya ini digunakan." <a></a> Tentukan gaya butang lalai

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

Saya akan mengisi kod kami dengan gaya sejagat yang berfungsi untuk semua butang. Gaya ini terletak di bahagian atas lapisan elemen, jadi ia akan digunakan untuk mana -mana dan semua butang tanpa mengira penandaan. Mereka boleh dianggap sebagai gaya butang lalai.

Tentukan gaya status butang

<code>@layer components {
  @layer elements {
    .button {
      /* 按钮样式... */
    }
  }
}</code>

Apa yang perlu pengguna lakukan apabila mereka berinteraksi dengan butang lalai? Ini adalah negara -negara yang berbeza yang butang mungkin mengambil apabila pengguna berinteraksi dengan mereka, dan kita perlu gaya mereka dengan sewajarnya.

Saya akan membuat sublayer yang baru dilancarkan secara langsung di bawah sublayer elemen, yang disebut secara kreatif "menyatakan" (negeri):

Jeda dan fikirkannya di sini. Negeri apa yang harus kita targetkan? Apa yang kita mahu ubah bagi setiap negeri ini?

Beberapa negeri boleh berkongsi perubahan harta yang sama, seperti :hover dan :focus dengan warna latar yang sama. Nasib baik, CSS memberikan kita alat untuk menyelesaikan masalah tersebut, menggunakan fungsi :where() untuk perubahan harta benda berdasarkan keadaan. Mengapa menggunakan :where() bukan :is()? :where() mempunyai kekhususan sifar, yang bermaksud lebih mudah untuk menutup daripada , mengambil kekhususan elemen dengan skor kekhususan tertinggi dalam parameternya. Menjaga kekhususan rendah adalah kebajikan apabila menulis CSS yang boleh diselaraskan, yang boleh dikekalkan. :is() :is()

Tetapi bagaimana kita mengemas kini gaya butang dengan cara yang bermakna? Maksud saya, bagaimana kita memastikan butang kelihatan seperti hover atau fokus? Kami hanya perlu menambah warna latar belakang baru, tetapi idealnya warna harus dikaitkan dengan

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

yang ditetapkan dalam lapisan elemen.

jadi mari kita refactor sedikit. Sebelum ini, saya menetapkan unsur background-color ke

. Saya mahu menggunakan semula warna, jadi lebih baik untuk menukarnya kepada pembolehubah CSS supaya kami dapat mengemas kini sekaligus dan menjadikannya terpakai di mana -mana. Bergantung pada pembolehubah adalah satu lagi kelebihan menulis CSS berskala dan dikekalkan.

.button saya akan membuat pembolehubah baru yang dipanggil background-color yang pada mulanya ditetapkan ke darkslateblue dan kemudian tetapkannya ke gaya butang lalai:

--button-background-color Sekarang kita telah menyimpan warna dalam pembolehubah, kita boleh menetapkan pemboleh ubah yang sama kepada hover dan fokus keadaan butang dalam lapisan lain, menukar darkslateblue ke warna yang lebih ringan menggunakan fungsi

yang agak baru, apabila butangnya dilegakan atau difokuskan.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Kembali ke lapisan negeri kita! Kami mula -mula menggabungkan warna dalam pembolehubah CSS baru yang dipanggil color-mix(): darkslateblue

kita boleh memohon warna itu dengan mengemas kini atribut --state-background-color.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Tentukan gaya butang yang diubah suai background-color

Di samping unsur -unsur dan lapisan negara, anda juga mungkin mencari beberapa jenis perubahan dalam komponen, seperti pengubah. Ini kerana tidak semua butang akan menjadi seperti butang lalai anda. Anda mungkin mahu butang dengan warna latar belakang hijau untuk pengguna mengesahkan keputusan. Atau anda mungkin mahu butang merah yang menunjukkan bahaya apabila diklik. Oleh itu, kita boleh mengambil gaya butang lalai sedia ada dan mengubah suai mereka untuk kes -kes penggunaan khusus ini.

<code>/* 组件顶级层 */
@layer components {

  .button {
    /* 组件元素层 */
    @layer elements {
      /* 样式 */
    }
  }
}</code>

Jika kita menganggap perintah cascades -selalu mengalir dari atas ke bawah -kita tidak mahu gaya yang diubahsuai mempengaruhi gaya di lapisan negara yang baru saja kita buat. Oleh itu mari kita tambahkan lapisan pengubah baru antara elemen dan keadaan:

Sama seperti bagaimana kita mengendalikan keadaan, kita kini boleh mengemas kini pembolehubah

untuk setiap pengubah butang. Sudah tentu, kita dapat mengubah gaya lebih jauh, tetapi kita tetap mudah untuk menunjukkan bagaimana sistem ini berfungsi.

kami akan membuat kelas baru yang mengubah butang lalai background-color dari darkslateblue ke darkgreen. Sekali lagi, kita boleh bergantung pada pemilih :is() kerana dalam kes ini kita memerlukan peningkatan kekhususan. Dengan cara ini, kita boleh mengatasi gaya butang lalai dengan kelas pengubah. Kami memanggil kelas ini .success (hijau adalah warna "kejayaan") dan memberikannya kepada :is():

<code>.button {}
.button-primary {}
.button-secondary {}
.button-warning {}
/* etc. */</code>

Jika kita menambah kelas .success ke salah satu butang kita, ia akan menjadi darkgreen bukannya darkslateblue, yang betul -betul kita mahu. Oleh kerana kami telah melakukan beberapa operasi color-mix() di lapisan negara, kami secara automatik akan mewarisi gaya hover dan fokus ini, yang bermaksud bahawa darkgreen akan menjadi cetek di negeri -negeri ini.

<code>.button {
  /* 所有按钮的通用样式 */
}</code>

Mengintegrasikan segala -galanya bersama -sama

kita boleh refactor mana -mana atribut CSS yang perlu diubah suai ke dalam atribut adat CSS, yang memberikan kita banyak ruang penyesuaian.

<code>/* 组件顶级层 */
@layer components {
  .button {
    /* 所有按钮的通用样式 */
  }
}</code>

Sila ambil perhatian: Lihatlah dengan lebih dekat pada demo dan lihat bagaimana saya menyesuaikan latar belakang butang menggunakan light-dark() -dan baca Sara Joy's "Come to the Light-Dark () Side" untuk mendapatkan pandangan penuh bagaimana ia berfungsi!

apa pendapat anda? Adakah anda akan menggunakannya untuk mengatur gaya anda? Untuk projek kecil dengan beberapa komponen, mewujudkan sistem lata boleh terlalu banyak. Tetapi sedikit percubaan seperti yang kita lakukan sekarang dapat menunjukkan berapa banyak yang kita ada dalam mengurus - atau bahkan menjinakkan - CSS cascades. Butang adalah rumit yang rumit, tetapi kita melihat berapa banyak gaya yang diperlukan untuk mengendalikan gaya dari gaya lalai untuk menulis versi negeri dan diubahsuai mereka.

Atas ialah kandungan terperinci Menguruskan Corak Komponen Sistem Reka Bentuk dengan Lapisan Cascade CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!