CSS反應景觀

許多CSS-IN-JS庫雖然從理論上框架 - 敏捷的庫，但在React Projects中找到了它們的主要用途。這在很大程度上是由於React缺乏內置的樣式解決方案，這與Vue，Svelte或Angular不同。這種“自我擁有”方法具有靈活性，但需要選擇樣式策略。儘管普通CSS仍然是可行的選擇，但CSS-IN-JS庫提供了諸如：

• 與組件的樣式共同座位
• 組成部分樣式
• 支撐驅動的樣式變化
• CSS中的JavaScript集成
• 主題功能

每個庫都提供了上述獨特的功能，通常會變化或擴展。重要的是，使用JavaScript進行樣式創作並不總是意味著基於JavaScript的樣式運輸。 “零運行時”庫在構建過程中將CSS彙編為CSS，從而提高了性能。

該概述得到了CSS-Tricks的正式學習合作夥伴的前端大師的支持。

前端發展培訓

Frontend Masters提供有關領先前端技術的全面課程，包括高級React培訓。

考慮中間反應課程

在探索庫之前，請注意：

• 我在每個圖書館的經驗各不相同； CSS模塊是我最廣泛的。演示是基本的。
• 歡迎通過評論或聯繫表格進行更正和補充。
• 目的是提供功能代碼示例，以方便參考。

包括框架

• 樣式組件
• CSS模塊
• 情感
• 針跡
• 香草提取
• JSS
• Linaria
• 風格的JSX
• 戈貝

圖書館摘要

樣式組件：非常受歡迎，以動態樣式和基於道具的變化而聞名。使用類似於CSS的模板字面語法，儘管也支持對象語法。提供SSR，但不是“零運行時”。

CSS模塊：簡單，範圍的樣式並鼓勵共同設置。它的關鍵特徵是成分（類似混合蛋白的類組合）。這是一種僅構建過程的解決方案，當提取CSS時，它具有真實的“零運行時”功能。與HMR合作，與Sass兼容。集成到next.js。

情感：啟用使用JavaScript的CSS樣式，提供樣式組成，源地圖，標籤和測試實用程序。支持字符串和對像樣式。類似於樣式組件，但具有潛在的性能差異。支持SSR，但不是零失調。迷人的，迷人和魅力被貶低了情感。

針跡：具有強大的變體API，出色的打字稿編輯器集成，主題支持和實用程序創建。提供SSR，接近零倒酒，但不會直接生成CSS文件。

香草提取：主要是SSR解決方案；除非啟用特定的運行時功能，否則“零運行時”。提供出色的打字稿編輯器集成，一個變體API和配方API（類似於針跡）。通過灑水支持主題和公用事業課程。現在剝奪了阿芙羅狄蒂的強大替代方案。

JSS：包括React集成，擴展語法和插件體系結構。

Linaria： “零運行時” CSS-IN-JS的先驅，彙編為CSS文件，但保留了動態元素的運行時。類似於API中的樣式組件。支持關鍵的CSS。

風格的JSX：需要建造過程的通用插件。使用

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.

以上是CSS反應景觀的詳細內容。更多資訊請關注PHP中文網其他相關文章！