Pemikiran mengenai CSS-in-JS dan utiliti-pertama CSS (Tailwind)

Tugas pembangunan UI terbaharu di tempat kerja memberikan peluang berharga untuk melawat semula CSS-in-JS dan CSS yang mengutamakan utiliti (Tailwind). Peranan saya sehari-hari jarang melibatkan kerja UI, jadi ini adalah pengalaman yang menyegarkan, jika sedikit berkarat. Matlamat saya di sini adalah untuk menawarkan perbandingan yang tidak berat sebelah bagi kedua-dua pendekatan, memfokuskan pada aliran kerja pembangunan dan perkakas.

Css Tailwind

Pilihan Tailwind pasukan kami agak spontan, didorong oleh keinginan untuk kecekapan. Walaupun kebiasaan berbeza-beza, dan beberapa keraguan wujud, penjimatan masa adalah faktor yang menarik.

Aspek Positif

Penyatuan, penciptaan pembolehubah tersuai dan pembangunan tema adalah sangat mudah. Memperluas atau membina tema baharu terbukti intuitif:

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

Pemasukan gaya asas, malah sesuatu yang semudah jidar lalai dan penyingkiran pelapik, merupakan penjimat masa yang ketara. Ini menyelaraskan aliran kerja dengan ketara.

Tailwind menyasarkan pengalaman intuitif, yang sebahagian besarnya dicapai. Walau bagaimanapun, beberapa aspek berasa kurang intuitif. Konvensyen penamaan kelas, walaupun secara amnya jelas (cth., p untuk pelapik, mb untuk margin-bawah), menimbulkan ketidakkonsistenan sekali-sekala (cth., rounded untuk border-radius). Ini boleh dikurangkan dengan definisi tema tersuai:

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

Tera Keseluruhan

Kebolehbacaan dan kebolehselenggaraan adalah kurang bermasalah daripada yang dijangkakan. Walaupun sintaks memerlukan tempoh pelarasan dan IntelliSense VS Code tertinggal sekali-sekala, kod kekal terurus dan mudah dinavigasi, walaupun dengan berbilang kelas digunakan pada elemen kecil.

Nota Penting: Elakkan terlalu bergantung pada @apply. Ini boleh membawa kepada hasil yang tidak diingini "Tailwind-in-CSS."

Rendering Sebelah Pelayan (SSR)

Yang penting, Tailwind tidak mengemukakan isu SSR semasa ujian. Penyepaduan lancarnya merupakan kelebihan yang ketara.

CSS-in-JS (Emosi)

Pada 2024-2025, penyelesaian CSS-dalam-JS mengalami penurunan populariti, sebahagian besarnya disebabkan oleh peningkatan komponen pelayan dalam rangka kerja seperti React.

Lihat: https://www.php.cn/link/9cb4d40fce0492278209290ee3e4ae31

Cabaran Utama

Isu utama berpunca daripada pergantungan pada API Konteks React. Mencampurkan komponen pelayan dan klien dalam aplikasi React boleh menyebabkan kehilangan data dan menghalang kemas kini gaya yang betul pada pemaparan semula. Had ini wujud pada banyak perpustakaan CSS-dalam-JS.

Walaupun alternatif yang serasi wujud, masalah asas kekal. Blog Joshua Comeau menyediakan konteks yang sangat baik tentang isu ini.

retrospektif

Di belakang, peralihan ke CSS-in-JS berasa kurang bermanfaat daripada yang dijangkakan pada awalnya. Walaupun pengalaman pembangunan yang terkandung (segala -galanya dalam satu fail) pada mulanya menarik, kelebihan ini terbukti kurang penting dari masa ke masa.

Pertimbangan jangka panjang

CSS-in-JS mengakibatkan peningkatan menaip dan konfigurasi overhead. Berbanding dengan Tailwind, ia berasa kurang cekap. Semasa lulus prop bersyarat menawarkan kuasa dan fleksibiliti:

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

Ini juga boleh merumitkan pemahaman dan refactoring kod. Gaya Penggantian Berlebihan Isyarat Potensi Reka Bentuk Sistem Ketidakkonsistenan:

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

Untuk projek baru, saya mungkin mengelakkan CSS-in-JS.

pembolehubah CSS dan bertemakan

pembolehubah CSS tidak ternilai. Mendefinisikan palet sekali dan menggunakannya di seluruh komponen memudahkan gaya, menawarkan pengalaman yang sama dengan menggunakan varian komponen yang telah ditetapkan.

<code>const Button = styled.button`
  background: ${props => props.variant === 'primary' ? "#ddd" : "#fff"};
`;

render(
  <div>
    <Button variant="primary">Primary</Button>
  </div>
);</code>

Postprocessors and Configuration

Postprocessors (mis., PostCSS) adalah penting untuk mengoptimumkan CSS. Mereka menawarkan faedah yang besar:

• cssnano: Mengeluarkan kod yang tidak digunakan.
• postcss-nested: Membolehkan CSS bersarang serupa dengan SASS.
• stylelint: Menyediakan keupayaan linting.
• autoprefixer: menambah awalan vendor (walaupun kurang kritikal sekarang).
• postcss-import: Membolehkan @import pernyataan.

(senarai penuh: ) Semasa menambah overhead, postprocessors meningkatkan pengalaman pemaju dan prestasi CSS. Faedah sering melebihi pelaburan awal.

Lightning CSS

Lightning CSS (alternatif berasaskan karat kepada PostCSS) menawarkan masa membina lebih cepat dan banyak ciri yang sama. Perlu diterokai jika anda mencari penyelesaian yang terintegrasi dengan baik.

Ringkasan

Landskap CSS berkembang pesat, dengan alat dan pendekatan baru sentiasa muncul. Pengalaman saya dengan Tailwind dan CSS-in-JS adalah bermaklumat, menonjolkan kekuatan dan kelemahan mereka. Kesan RSC pada alat CSS masa depan adalah penting dan menjamin pertimbangan selanjutnya.

Atas ialah kandungan terperinci Pemikiran mengenai CSS-in-JS dan utiliti-pertama CSS (Tailwind). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!