2 篇博文 含有标签「CSS-in-JS」

Emotion是一个专门为使用 JavaScript 编写 CSS 样式而设计的库

使用Emotion有两种主要的方法，一种是框架无关的；另一种是与 React 一起使用。

官网

GitHub

传统开发模式​

一般而言，在 Web 开发中，我们都是 CSS、HTML、JavaScript 三者进行分离的。

HTML 负责网页的结构。

CSS 负责网页上面各个元素的展示样式（效果）。

JavaScript 负责网页与用户的交互（逻辑）。

将计算机程序分隔为不同部分的设计原则，就是关注点分离原则（Separation of concerns SoC）。因此 HTML、CSS、JavaScript 三者就是典型的应用关注点分离原则。

flowchart LR
    HTML(HTML  结构) <---> CSS(CSS 效果)
    HTML <--> JavaScript(JavaScript 行为)
    style HTML fill:#52c41a,color:white,stroke:#52c41a
    style CSS fill:#1890ff,color:white,stroke:#1890ff
    style JavaScript fill:#fa8c16,color:white,stroke:#fa8c16

什么是 CSS-in-JS​

CSS-in-JS是一种样式技术，使用 JavaScript 编写 CSS，也就是把 CSS 集成到 JavaScript 中。与我们的认知是背道而驰的

解析此 JavaScript 时，会生成 CSS（通常作为<style>元素）并附加到 DOM 中。