Landskap CSS-in-react

Banyak perpustakaan CSS-in-JS, sementara rangka kerja secara teorinya, mencari penggunaan utama mereka dalam projek React. Ini sebahagian besarnya disebabkan oleh kekurangan React dari penyelesaian gaya terbina dalam, tidak seperti Vue, Svelte, atau Angular. Pendekatan "membawa-anda sendiri" menawarkan fleksibiliti tetapi memerlukan pilihan strategi gaya. Walaupun CSS biasa tetap menjadi pilihan yang berdaya maju, perpustakaan CSS-in-JS menawarkan manfaat seperti:

• Gaya lokasi dengan komponen
• Gaya Skop Komponen
• Variasi gaya yang didorong oleh prop
• Integrasi JavaScript dalam CSS
• Keupayaan mereka

Setiap perpustakaan menyediakan ciri -ciri unik, sering variasi atau sambungan di atas. Yang penting, menggunakan JavaScript untuk pengarang gaya tidak selalu bermaksud penghantaran gaya berasaskan JavaScript. Perpustakaan "Zero Runtime" menyusun gaya kepada CSS semasa proses membina, meningkatkan prestasi.

Gambaran keseluruhan ini disokong oleh rakan kongsi pembelajaran CSS-Tricks 'CSS-Tricks.

Latihan Pembangunan Front-End

Frontend Masters menawarkan kursus yang komprehensif mengenai teknologi front-end terkemuka, termasuk latihan React Advanced.

Pertimbangkan kursus React Intermediate

Sebelum meneroka perpustakaan, nota:

• Pengalaman saya dengan setiap perpustakaan berbeza -beza; Modul CSS adalah yang paling luas saya. Demo adalah asas.
• Pembetulan dan penambahan dialu -alukan melalui komen atau borang hubungan.
• Matlamatnya adalah untuk menyediakan contoh kod fungsional untuk rujukan mudah.

Termasuk rangka kerja

• Komponen gaya
• Modul CSS
• Emosi
• Jahitan
• Vanilla-Extract
• JSS
• Linaria
• JSX gaya
• Goober

Ringkasan Perpustakaan

Komponen gaya: sangat popular, yang dikenali dengan gaya dinamik dan variasi berasaskan prop. Menggunakan sintaks literal templat yang menyerupai CSS, walaupun sintaks objek juga disokong. Menawarkan SSR, tetapi bukan "sifar runtime."

Modul CSS: Mudah, gaya skop dan menggalakkan lokasi bersama. Ciri utamanya ialah komposisi (kombinasi kelas seperti mixin). Ia adalah penyelesaian proses-proses sahaja, menawarkan keupayaan "sifar runtime" yang benar apabila CSS diekstrak. Bekerja dengan HMR dan serasi dengan SASS. Bersepadu ke Next.Js.

Emosi: Membolehkan gaya CSS dengan JavaScript, menyediakan komposisi gaya, peta sumber, label, dan utiliti ujian. Menyokong kedua -dua gaya rentetan dan objek. Sama seperti komponen gaya tetapi dengan perbezaan prestasi yang berpotensi. Menyokong SSR tetapi bukan sifar-runtime. Glamor, glam, dan glamor tidak disengajakan memihak kepada emosi.

Jahitan: Mempunyai API varian yang mantap, integrasi editor TypeScript yang sangat baik, sokongan bertemakan, dan penciptaan utiliti. Menawarkan SSR, menghampiri sifar-runtime, tetapi tidak menjana fail CSS secara langsung.

Vanilla-Extract: terutamanya penyelesaian SSR; "Zero Runtime" melainkan ciri runtime tertentu diaktifkan. Menyediakan integrasi editor TypeScript yang sangat baik, API varian, dan API resipi (serupa dengan jahitan). Menyokong kelas bertemakan dan utiliti melalui taburan. Alternatif yang kuat kepada Aphrodite yang kini dikurangkan.

JSS: Termasuk Integrasi React, Sintaks Extend, dan Senibina Plugin.

Linaria: Perintis "sifar runtime" CSS-in-JS, menyusun fail CSS tetapi mengekalkan runtime untuk unsur-unsur dinamik. Sama seperti komponen gaya dalam API. Menyokong CSS kritikal.

JSX Styled: Plugin Babel yang memerlukan proses membina. Menggunakan a

Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.

Additional Resources

• Shopify's library selection research.
• Facebook's in-development "StyleX" (currently un-open-sourced).
• "Style9," a library aiming to replicate StyleX's features.
• Tailwind CSS (with just-in-time mode) for atomic CSS.
• Styled System, a React-oriented approach to atomic styling.
• Twin, another React-friendly atomic styling solution.
• CSS-in-JS Playground, showcasing various libraries including Fela and Radium.

1. "TypeScript editor experience" refers to TypeScript's code completion capabilities, enhancing developer workflow in editors like VS Code.

Atas ialah kandungan terperinci Landskap CSS-in-react. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!