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中文网其他相关文章！