Warna bertemakan dengan sifat tersuai CSS dan tailwind

Sifat Custom CSS bukan sahaja meningkatkan kecekapan kod, tetapi juga mewujudkan lebih banyak kemungkinan dalam CSS, terutama dalam reka bentuk tema. Pasukan Smash Atom menggunakan CSS Tailwind (kerangka kelas utiliti). Artikel ini akan meneroka cara menggunakan sifat tersuai untuk reka bentuk tema dan bagaimana untuk mengintegrasikannya dengan Tailwind untuk memaksimumkan kebolehgunaan semula kod anda. Artikel ini tidak akan menjelaskan pengenalan kepada Tailwind - sila periksa dokumentasi rasmi - tetapi walaupun anda baru untuk Tailwind, anda mungkin dapati beberapa petua berguna.

Gambaran keseluruhan topik

Katakan kita mempunyai komponen "CTA" yang mengandungi tajuk, badan, dan butang.

Menulis CSS biasa (bukan ekor angin) untuk skema warna ini kelihatan seperti ini:

 <code>.cta { background-color: #742a2a; // 深红色 color: #ffffff; // 白色}  .cta__heading { background-color: #e53e3e; // 中等红色 color: #742a2a; } .cta__button { background-color: #e53e3e; }</code>

Dengan Tailwind, kami akan menggunakan warna ini sebagai kelas utiliti dalam HTML:

<code><div>
<h3 id="Sertailah-senarai-mel-kami">Sertailah senarai mel kami</h3>
<div>
<p>Dapatkan yang pertama untuk mengetahui produk baru kami</p>
  Daftar</div>
</div></code>

Saya sengaja meninggalkan kelas yang tidak berkaitan dengan skema warna asas, tetapi anda dapat melihat contoh penuh dalam demo ini:

Sekarang, jika kita mahu menggunakan skema warna yang berbeza untuk komponen kita, kita perlu menimpa nilai warna komponen asal. Dalam ketiadaan Tailwind, pendekatan yang sama adalah untuk melampirkan kelas tema kepada komponen itu sendiri dan mentakrifkan semula nilai warna dalam lata. Jadi untuk komponen dengan kelas pengubah suai ".cta-Blue" (menggunakan konvensyen BEM), kami akan menggunakan nilai CSS skema warna biru:

 <code>.cta--blue { background-color: #2a4365; // 深蓝色} .cta--blue .cta__heading { background-color: #3182ce; // 中等蓝色 color: #2a4365; } .cta--blue .cta__button { background-color: #3182ce; }</code>

Jika kita menggunakan sass atau preprocessors lain, kita boleh menggunakan pembolehubah untuk memudahkan kerja kita, dan kita mungkin bersarang. Ia tidak menjadikan kod kami lebih ringkas, tetapi dengan mengemas kini nilai -nilai ini di satu tempat, ia menjadikan kod itu lebih mudah diurus.

Sekarang, katakan kita mempunyai 10 skema warna yang berbeza, seperti yang saya alami dalam projek baru -baru ini. Kod kami mula menjadi lebih lama kerana pada dasarnya kami mengulangi contoh di atas 10 kali sebelum menukar nilai warna ini. Sekarang bayangkan bahawa setiap komponen dalam sistem reka bentuk kami memerlukan 10 skema warna, dan banyak komponen jauh lebih kompleks daripada CTA mudah kami. Mungkin tema kami juga memerlukan fon yang berbeza. Tiba -tiba, kita perlu menulis banyak CSS.

Gunakan tailwind untuk reka bentuk tema

Sebaliknya, jika kita menggunakan Tailwind, kita perlu menukar pelbagai kelas dalam HTML itu sendiri. Walaupun kita menggunakan kerangka JavaScript (seperti React atau Vue), ini bukan tugas yang mudah. Untuk memastikan gaya yang tidak digunakan dikeluarkan dalam versi pengeluaran, Tailwind tidak menggalakkan penggunaan rentetan rentetan untuk membuat nama kelas (pada masa penulisan). Jadi membina topik kami mungkin bermakna menambah banyak logik kepada komponen kami.

Gunakan sifat tersuai untuk reka bentuk tema

Dengan menggunakan sifat tersuai untuk tema warna kami, kami secara drastik dapat mengurangkan jumlah kod yang perlu ditulis dan mengurangkan beban penyelenggaraan. Mari kita lihat bagaimana untuk melakukan ini dalam CSS biasa.

Kami menentukan atribut tersuai sebagai: pembolehubah pada pemilih root, menjadikannya pembolehubah global. (Pemilih badan juga terpakai.) Kita boleh menggunakan pembolehubah ini untuk menggantikan nilai atribut warna dalam pemilih:

 <code>:root { --primary: #742a2a; // 深红色 --secondary: #e53e3e; // 中等红色} .cta { background-color: var(--primary); color: white; } .cta__heading { background-color: var(--secondary); color: var(--primary); } .cta__button { background-color: var(--secondary); }</code>

Di sinilah ia benar -benar ajaib: kini membuat kod untuk setiap topik hanya memerlukan mengemas kini nilai atribut tersuai ini. Tidak kira di mana kita menggunakan kelas tema, nilai baru akan diwarisi:

 <code>.th-blue { --primary: #2a4365; // 深蓝色 --secondary: #3182ce; // 中等蓝色}</code>

Sekiranya kita mahukan skema warna biru, kita boleh memohon kelas .th-biru ke komponen, dan juga dalam Gunakannya pada tag untuk memohon tema di seluruh halaman dan kemudian menulis semula pada komponen individu seperti yang diperlukan. Menggunakan kelas utiliti boleh menjimatkan lebih banyak usaha penulisan kod daripada kelas khusus komponen (seperti .CTA-BLUE dalam kod asal), kerana ia boleh digunakan di mana sahaja di pangkalan kod kami.

Mengendalikan penyemak imbas warisan

Seperti banyak agensi, banyak pelanggan Smash Atom masih memerlukan sokongan kami untuk Internet Explorer 11. Walaupun saya dapat menerima kaedah peningkatan progresif dalam kebanyakan kes (contohnya, menyediakan susun atur sandaran yang lebih mudah untuk penyemak imbas yang tidak menyokong grid CSS), saya mendapati reka bentuk tema menjadi kawasan yang biasanya tidak membenarkan kompromi mudah. Pelanggan ingin melihat warna dan fon jenama mereka, walaupun pada pelayar yang lebih tua. Menyediakan sandaran dengan pertanyaan ciri memerlukan banyak kerja tambahan, yang akan mengimbangi manfaat menggunakan sifat tersuai. Untuk mengatasi masalah ini, kita memerlukan polyfill.

Terdapat beberapa pilihan untuk menyediakan polyfill untuk sifat tersuai dalam IE 11.

PROPER-PROPERSSSS-CUSTOM

Yang pertama ialah menggunakan plugin PostCSS yang dipanggil Propers-Properties PostCSS-Custom. Jika anda sudah menggunakan PostCSS dalam aliran kerja anda, menambah plugin ini agak mudah. Ia berfungsi dengan memproses CSS anda dan mengeluarkan hasil pembolehubah sebagai nilai harta. Jadi jika anda mempunyai CSS berikut:

 <code>:root { --color: red; } h1 { color: var(--color); }</code>

Hasilnya selepas pemprosesan akan:

 <code>h1 { color: red; color: var(--color); }</code>

Penyemak imbas yang tidak menyokong sifat tersuai akan mengabaikan peraturan kedua dan kembali kepada nilai harta biasa. Terdapat juga pilihan untuk mengeluarkan peraturan dengan sifat tersuai dari output, jadi saiz fail akan lebih kecil. Ini bermakna tiada penyemak imbas mendapat sifat tersuai -itu masalah jika anda mengemas kini pembolehubah secara dinamik -tetapi anda boleh menggunakannya untuk nilai statik dalam kod anda tanpa kesan buruk.

Malangnya, polyfill ini mempunyai beberapa batasan:

1. Anda perlu menentukan fail (atau fail) yang mentakrifkan sifat tersuai dalam konfigurasi.
2. Sifat tersuai hanya boleh ditakrifkan pada: pemilih root.

Had pertama adalah agak remeh, tetapi yang kedua malangnya menjadikan polyfill ini tidak berguna untuk kes penggunaan reka bentuk topik kami. Ini bermakna kita tidak dapat mentakrifkan semula pembolehubah pada pemilih untuk membuat topik kami.

IE11CUSTOPHOPERIES

Pilihan polyfill ini melibatkan penyediaan skrip klien dan bukannya pra -proses CSS. Kami boleh menambah skrip berikut ke kepala kami untuk memastikan bahawa polyfill hanya dimuatkan dalam IE 11:

 <code>window.MSInputMethodContext && document.documentMode && document.write('');</code>

Ini membolehkan kita memanfaatkan sifat tersuai seperti yang kita lakukan dalam contoh di sini, jadi ini adalah penyelesaian yang saya memutuskan untuk digunakan. Ia mempunyai batasan bahawa sifat tersuai yang ditetapkan dalam atribut gaya tidak akan dipenuhi. Tetapi saya telah mengujinya terhadap contoh reka bentuk topik di atas dan ia berfungsi dengan baik.

Tetapi apa yang perlu dilakukan dengan tailwind?

Seperti yang telah kita lihat, kelas utiliti-satu-satu-tujuan yang boleh digunakan di mana sahaja di HTML-boleh membuat kod kami lebih banyak boleh diguna semula. Ini adalah titik jualan utama tailwind dan kerangka kelas utiliti lain - saiz fail CSS yang anda sampaikan akhirnya akan menjadi lebih kecil sebagai hasilnya. Tailwind menyediakan pelbagai kelas warna: .bg-red-medium akan memberi kita nilai harta warna latar belakang merah, .text-red-medium adalah untuk warna, dan sebagainya, untuk sempadan, bayang-bayang kotak, atau di mana sahaja anda boleh memikirkan di mana nilai warna mungkin diperlukan.

Warna boleh ditakrifkan dalam fail konfigurasi:

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   }  } } }</code>

Jika kita mahu menggunakan nilai harta tersuai untuk kelas tailwind kita, kita boleh menentukannya dalam konfigurasi:

 <code>module.exports = { theme: {  colors: {   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

Saya mengutamakan nama kelas yang berkaitan dengan subjek jadi jelas bahawa mereka sangat relevan dengan reka bentuk subjek, tetapi anda boleh berasa bebas untuk menggunakan mana-mana konvensyen yang sesuai dengan anda.

Sekarang kita boleh menggunakan kelas ini melalui tailwind. Menggunakan .bg-th-primary bersamaan dengan menulis:

 <code>.some-element { background-color: var(--primary); }</code>

Di CSS kami, kami dapat menentukan sifat tersuai tema seperti dahulu:

 <code>:root { --primary: #742a2a; --secondary: #742a2a; } .th-blue { --primary: #2a4365; --secondary: #3182ce; }</code>

Mari gunakan kelas ini ke HTML kami. Contoh pertama memberikan kita komponen dengan tema lalai (pembolehubah yang ditakrifkan pada: root). Yang kedua mempunyai tema biru kami. Satu-satunya perbezaan ialah kelas .th-Blue telah ditambah kepada komponen. (Untuk kesederhanaan dan kejelasan, saya meninggalkan kelas yang tidak berkaitan dengan topik ini.)

<code><div class="bg-th-primary text-white">
<h3 id="Sertailah-senarai-mel-kami">Sertailah senarai mel kami</h3>
<div>
<p>Dapatkan yang pertama untuk mengetahui produk baru kami</p>
<button class="bg-th-secondary">Daftar</button>
</div>
</div>


<div class="th-blue bg-th-primary text-white">
<h3 id="Sertailah-senarai-mel-kami">Sertailah senarai mel kami</h3>
<div>
<p>Dapatkan yang pertama untuk mengetahui produk baru kami</p>
<button class="bg-th-secondary">Daftar</button>
</div>
</div></code>

Menggunakan konfigurasi sebagai panduan gaya

Tailwind menggalakkan anda untuk menentukan semua pembolehubah dalam konfigurasi anda, dan secara peribadi, saya bersetuju bahawa ini adalah pendekatan yang lebih baik. Ini bermakna bahawa fail konfigurasi boleh menjadi satu sumber fakta, bukannya (mungkin) berakhir dengan pelbagai tempat untuk menentukan warna dan nilai tema lain. Mujurlah, kita juga boleh menggunakan nilai -nilai dalam fail konfigurasi Tailwind untuk sifat tersuai kami. Kita perlu terlebih dahulu menentukan semua warna dalam konfigurasi (dengan mengandaikan kita tidak menggunakan palet lalai yang disertakan oleh Tailwind):

 <code>module.exports = { theme: {  colors: {   red: {    medium: '#e53e3e',    dark: '#742a2a'   },   blue: {    medium: '#3182ce',    dark: '#2a4365'   },   'th-primary': 'var(--primary)',   'th-secondary': 'var(--secondary)'  } } }</code>

Kemudian kita boleh mengakses objek tema dalam CSS:

 <code>:root { --primary: theme('colors.red.dark'); --secondary: theme('colors.red.medium'); } .th-blue { --primary: theme('colors.blue.dark'); --secondary: theme('colors.blue.medium'); }</code>

Meringkaskan

Saya sangat gembira dapat menggunakan sifat tersuai tanpa bimbang tentang sokongan penyemak imbas, dan saya lebih gembira dapat mengintegrasikannya dengan lancar dengan aliran kerja kami yang sedia ada. Sukar untuk membesar -besarkan masa mereka akan menyelamatkan kami dari segi reka bentuk tema. Saya berharap bahawa walaupun anda bukan pengguna tailwind, artikel ini boleh menggalakkan anda untuk mencuba sifat tersuai untuk kes penggunaan ini.

Atas ialah kandungan terperinci Warna bertemakan dengan sifat tersuai CSS dan tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!