概述

在本节中，我们将了解 EffCSS 的基本概念，将其与类似物进行比较，并确定何时使用它。

又一个 CSS-in-JS？

简而言之——是的。EffCSS 是一个 CSS-in-JS 库，旨在成为一个创建复杂且可预测样式的简单工具。该库基于以下几个抽象层：

• StyleSheet maker 只是一个 JS 函数，它接收一个包含实用工具的对象作为参数，并返回一个包含样式的对象或字符串；实用工具包含一些有用的函数，可以生成伪选择器、at 规则、BEM 选择器等。
• Style provider 是客户端的自定义 HTMLScriptElement，可以在服务器端进行模拟，以处理和管理任何地方的样式表生成器。

它还使用常见的浏览器 API，例如：

• CSSStyleSheet API,
• Web Components,
• Document adoptedStyleSheets property.

因此，EffCSS 不需要任何外部依赖项。它在所有现代浏览器和任何框架中都能以相同的方式运行。

主要内置功能

• 客户端CSS生成 - 您可以通过Style provider在客户端动态使用样式表，
• 服务器端CSS生成 - Style provider 可以将其状态序列化为可用于SSR/SSG的HTML字符串，
• CSS切换 - 任何生成的样式表都可以通过Style provider on/off方法打开/关闭。
• 主题支持 - 可以使用主题控制器对象创建/更新/删除主题，该对象可通过 Style provider 对象的 theme 属性访问。
• 基于 TypeScript 的样式表 - 如果样式表制作者使用 TypeScript 类型，那么 样式使用者 就可以解析带有自动补全功能的样式选择器。
• 隔离和压缩的选择器 - 每个样式表制作者都可以使用 bem 工具返回带有唯一前缀的选择器，也可以通过 Style provider 的 min 属性进行压缩。

比较

Sass / Less

预处理器提供自己的语法和相关约束。EffCSS 允许你以任何你想要的方式使用现代 JavaScript 和 TypeScript。

Tailwind

Tailwind 用于运行实用工具，并且需要编辑器进行语法高亮和自动补全设置。EffCSS 用于运行样式表，并允许通过 TypeScript 泛型实现选择器自动补全。

Emotion

@emotion/css 有一些依赖项，在某些情况下还需要相关生态系统中的其他包（例如 @emotion/react、@emotion/styled）。而 EffCSS 则完全独立，没有任何依赖项，在所有情况下都能正常工作。

Styled Components

Styled Components 专为 React 组件设计样式。EffCSS 与框架无关。

Linaria

Linaria 是一个零运行时库。EffCSS 可以在任何地方创建 CSS。

何时使用？

选择图书馆其实是个人喜好问题。事实上，可能还有其他几个原因：

你想要

• 使用与框架无关的工具 😍,
• 多次使用样式并添加 TypeScript 提示。 😎,
• 无需额外设置即可在服务器上使用样式 😃.

你不想

• 在项目中安装额外的构建插件 😦,
• 为编辑器添加特殊扩展 😨,
• 学习新语法 😠.

你至少喜欢其中一个吗？那就让我们开始吧！