Tahap penggunaan harta tersuai yang berbeza

Salah satu cara untuk menggunakan sifat tersuai adalah memikirkannya sebagai token reka bentuk: warna, jarak, fon, dan banyak lagi. Anda boleh menetapkannya di akar halaman dan menggunakannya di seluruh CSS. Sangat berguna dan selama juta tahun yang lalu, bukan sahaja sifat tersuai, tetapi kes penggunaan klasik untuk pembolehubah preprocessor.

Satu lagi cara untuk digunakan (yang boleh digunakan bersempena dengan kaedah token reka bentuk) adalah menggunakannya dengan lebih teliti untuk setiap pilihan gaya unik utama pada mana -mana elemen yang diberikan.

Katakan anda mempunyai kad seperti ini (dipermudahkan untuk tujuan demonstrasi):

 <code>.card { background: hsl(200deg 15% 73%); border: 4px solid rgb(255 255 255 / 0.5); padding: 2rem; border-radius: 8px; } .card > h2 { margin: 0 0 1rem 0; border-bottom: 3px solid rgba(0 0 0 / 0.2); }</code>

sangat bagus.

Walau bagaimanapun, apabila anda tidak dapat dielakkan membuat variasi kad, anda perlu mengatasi peraturan ini. Kaedah atribut adat CSS boleh seperti ini:

 <code>.card { --card-background: hsl(200deg 15% 73%); --card-border: 4px solid rgb(255 255 255 / 0.5); --card-padding: 2rem; --card-border-radius: 8px; --card-title-margin: 0 0 1rem 0; --card-title-border: 3px solid rgba(0 0 0 / 0.2); background: var(--card-background); border: var(--card-border); padding: var(--card-padding); border-radius: var(--card-border-radius); } .card > h2 { margin: var(--card-title-margin); border-bottom: var(--card-title-border); }</code>

Pada masa ini, ia sedikit lebih lama, tetapi lihat apa yang berlaku apabila kita mahu membuat variasi:

 <code>.card-variation { --card-background: purple; --card-padding-block: 2.5rem; --card-title-margin: 0 0 2rem 0; }</code>

Berikut adalah tiga kelebihan yang jelas:

• Saya telah mengubah hanya nilai -nilai yang ditetapkan secara eksplisit untuk berubah. Prototaip kad utama saya mengekalkan integriti yang saya mahu ia mengekalkan.
• Saya boleh gaya elemen kanak -kanak variasi tanpa menulis semula pemilih ini dengan betul.
• Saya kini boleh lulus gaya menimpa dari atribut gaya dalam HTML untuk varian satu kali yang cepat.

Gunakan sandaran untuk mengurangkan kelebihan

Daripada mengisytiharkan sifat tersuai di bahagian atas dan kemudian menggunakannya di bawah, saya boleh melakukannya pada masa yang sama dengan cara ini:

 <code>.card { background: var(--card-background, hsl(200deg 15% 73%)); border: var(--card-border, 4px solid rgb(255 255 255 / 0.5)); padding: var(--card-padding, 2rem); border-radius: var(--card-border-radius, 8px); } .card > h2 { margin: var(--card-title-margin, 0 0 1rem 0); border-bottom: var(--card-title-border, 3px solid rgba(0 0 0 / 0.2)); }</code>

Kini, jika harta seperti-kad-kadbod ditetapkan, ia akan mengatasi nilai sandaran di sini. Saya tidak suka ini kerana ia bermakna bahawa elemen di atas .card boleh menimpanya. Ini mungkin apa yang anda mahu, tetapi ini tidak sama seperti mengisytiharkan nilai di peringkat .card pada mulanya. Tidak ada pendapat yang kuat di sini.

Penguraian lanjut

Contohnya ialah anda mungkin mahu mengawal padding secara berasingan.

 <code>.card { --card-padding-block: 2rem; --card-padding-inline: 2rem; --card-padding: var(--card-padding-block) var(--card-padding-inline); padding: var(--card-padding); }</code>

Sekarang, jika saya mahu, varian hanya dapat mengawal sebahagian daripada padding:

 <code>.card-variation { --card-padding-inline: 3rem; }</code>

Tetapi anda perlu menyedari masalah besar. Ini bermakna jika anda mengisytiharkan semua ini di akar, ini tidak akan berfungsi kerana sifat -sifat bersarang ini telah dihuraikan. Tetapi selagi ia diisytiharkan pada .card terlebih dahulu, anda akan baik -baik saja di sini.

Berlebihan?

Katakan anda ingin mempunyai kawalan yang sangat tinggi ke atas setiap bahagian nilai. Contohnya:

 <code>html { --color-1-h: 200deg; --color-1-s: 15%; --color-1-l: 73%; --color-1-hsl: var(--color-1-h) var(--color-1-s) var(--color-1-l); --color-1: hsl(var(--color-1-hsl)); }</code>

Ia agak pandai, tetapi mungkin terlalu banyak. Warna-warna itu hampir pasti akan diisytiharkan pada akar dan tetap tidak berubah, jadi masalah besar ini akan menjadikannya mustahil untuk menimpa sub-properties peringkat rendah. Juga, jika anda mempunyai-Color-1, anda mungkin mempunyai 2-9 (atau lebih), yang hebat kerana sistem warna jauh lebih halus daripada matematik bahagian warna yang mudah.

Sistem Reka Bentuk Dihantar?

Tidak ada keraguan bahawa Tailwind sangat popular. Ia menggunakan kaedah atom, di mana sebilangan besar kelas HTML mengawal harta secara berasingan. Saya fikir sebahagian daripada sebabnya popular adalah bahawa jika anda memilih dari kelas -kelas yang telah dikonfigurasikan ini, reka bentuk akhirnya menjadi cukup baik. Anda tidak boleh pergi ke landasan. Anda memilih dari pelbagai nilai terhingga yang direka untuk menjadikannya kelihatan baik.

Saya tidak akan mengatakan bahawa kaedah gaya berdasarkan sifat tersuai adalah sama. Sebagai contoh, anda masih perlu mempertimbangkan abstraksi nama kelas dan bukannya menggunakan gaya terus ke elemen HTML. Walau bagaimanapun, ia mungkin menikmati beberapa kekangan/sekatan yang sama seperti Tailwind dan kaedah kelas atom yang lain. Jika anda hanya boleh memilih dari nilai yang telah ditetapkan-SPACING-X,-nilai-nilai-X, dan-nilai-font-x, anda boleh mencapai reka bentuk yang lebih kohesif berbanding sebelum ini.

Secara peribadi, saya merasa baik untuk bergerak ke arah sistem reka bentuk yang lebih bergantung pada sifat tersuai - jika tiada apa yang membuat variasi dan liputan lebih mudah untuk dikendalikan daripada ini.

Bagaimanakah sistem reka bentuk pihak ketiga mengambil ciri-ciri yang mereka berikan sebagai ... hanya satu set ciri khas untuk anda gunakan pada kehendak?

Penyerahan pihak ketiga tidak perlu memasukkan segala-galanya seperti ini. Sebagai contoh, peralihan Adam Argyle.Style menyediakan "hackpack" yang hanyalah harta tersuai penolong animasi transformasi.

Kos pemahaman

Satu hujah yang saya dengar terhadap pendekatan yang lebih komprehensif ini kepada sifat tersuai adalah pemahaman baru. Jika anda menulis sistem, ia mungkin membuat banyak akal kepada anda. Tetapi ia adalah abstraksi tambahan di atas CSS. Semua orang berkongsi pengetahuan CSS, sementara pengetahuan sistem tersuai hanya dikongsi oleh orang yang terlibat secara aktif dalam sistem.

Sistem yang baru menggunakan sifat tersuai akan mempunyai lengkung pembelajaran yang sangat curam.

video

Atas ialah kandungan terperinci Tahap penggunaan harta tersuai yang berbeza. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!