更快的React应用编码： 如何从Emotion CSS-in-JS迁移到Stylify Utility-First CSS。
想更快地设计你的React应用程序吗？了解如何轻松地从Emotion CSS-in-JS迁移到Stylify utility-first CSS，以便更好地开发React。
在React中寻找一个更好的方式来管理你的CSS？了解如何从Emotion CSS-in-JS迁移到Stylify CSS的utility-first方法并简化你的开发工作流程。
你可以在Playground On Stackblitz🚀中尝试本文的例子。
💎 介绍
Stylify是一个库，它使用类似CSS的选择器，根据你所写的内容生成优化的实用优先的CSS。
特点：
- ✅构建模块。没有运行时脚本。
- ✅ 类似CSS的选择器
- ✅ 没有框架需要研究
- ✅ 花在文档上的时间更少
- ✅ 纠结&极小的CSS
- ✅ 不需要清除CSS
- ✅ 组件、变量、自定义选择器
- ✅ 它可以生成多个CSS捆绑包
🔗 组件
在Emotion中，组件通常是这样定义的：
const Title = styled.h1`
color: blue
font-weight: bold
@media (max-width: 640px) {
color:red
}
`;
<Title>你好，世界！🎉</Title>Stylify提供了一个类似的功能。组件可以在文件中定义（使用content options），在那里它们被使用，或者在配置中全局定义。
以文件内的配置为例。`stylify-components’之间的内容希望是没有周围括号的javascript对象：
<!--
stylify-components
title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>全局编译器配置中的例子：
const compilerConfig = {
title: 'color:blue font-weight:bold md:color:red'
};使用方法：
<h1 class="title"></h1>组件是 “懒惰的”（按需生成）。这意味着，即使你配置了它们（在文件中或全局中），它们也只在内容中匹配时才会被生成。没有未使用的CSS将被生成。实用程序也是如此。如果一个组件的实用程序没有在内容中直接匹配，选择器不会被生成，只有组件的选择器被添加到CSS输出中。
生产中的CSS输出在生产中看起来会是这样的：
.a,.d {color:blue}
.b,.d {font-weight:bold}
@media (max-width: 768px) {
.c,.d {color:red}
}html的输出：
<h1 class="d"></h1>🎯选择器
在Emotion中，你可以使用CSS道具直接对元素进行样式设置，就像这样：
<div css={css`
color: blue;
font-weight: bold;
@media (min-width: 640px) {
color: red;
}
`}></div>Stylify允许你在内容中直接使用实用程序。所以上面的例子可以重构成这样：
<div className="color:blue font-weight:bold md:color:red"></div>CSS的生产输出将类似于组件的例子。然而，HTML将看起来像这样：
<div className="a b c"></div>🌐全局样式
有时我们需要对应用程序的某些部分进行全局样式设计。要在Emotion中做到这一点，我们需要使用Global组件：
<Global
styles={css`
.some-class {
color: hotpink !important;
}
`}
/>在Stylify中，你可以使用自定义选择器来解决这个问题。这些选择器可以直接定义在类属性中或在全局配置中。
以class属性为例：
<div className="[.button_.icon]{font-size:14px}">
<button className="
[.icon]{color:#fff;border-radius:12px}
[&+button]{margin-left:24px}
">
<i className="icon"></i>
</button>
<button></button>
<div>类属性中的语法模式看起来像这样：
[CSS 选择器]{程式化选择器由 ; （分号}在CSS和Stylify选择器中，_（下划线）被用来代替空格，&字符总是指的是当前元素。
同样的代码，但在全局配置中，看起来是这样的：
const compilerConfig = {
customSelectors: {
'.buttons-wrapper .button .icon': 'font-size:14px',
'.button': `
.icon { color:#fff border-radius:12px }
& + button { margin-left:24px }
`,
}
}当在全局配置中定义customSelectors时，该语法让你使用嵌套功能。&字符指的是上层。
全局配置的用法：
<div className="buttons-wrapper">
<button className="button">
<i className="icon"></i>
</button>
<button></button>
</div>💲变量
当你需要使用道具向组件传递颜色时，那么你可以使用本地CSS变量，而不是这样做color: ${props => props.textColor};：
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
>
</div>我们只需要告诉Stylify，“localTextColor “是外部的：
const compilerConfig = {
externalVariables: ['localTextColor']
}外部变量也可以只在使用它的文件中定义：
<!--
stylify-externalVariables
localTextColor
/stylify-externalVariables
-->
<div
style={{ '--localTextColor': props.textColor }}
className="title color:$localTextColor"
>Stylify还提供了一个选项来配置自定义变量。它可以在使用它们的文件中进行，方法与组件相同，或者在全局配置中进行：
在文件中：
<!--
stylify-variables
primary: '#000',
secondary: '#444'
/stylify-variables
-->
<div class="color:$primary"></div>在编译器配置中：
const compilerConfig = {
primary: '#000'
}📦分割CSS
Emotion会自动拆分CSS，并根据渲染后的组件直接注入到文档中。
Stylify没有任何运行时脚本，所以你必须手动配置Bundler和拆分功能。
然而，Stylify的输出非常小（对于一个大型网站来说，它甚至可以是10 Kb（gzipped）），所以整个项目只有一个捆绑包就可以了。最终，你可以查看提示来分割CSS捆绑。
捆绑配置的例子：
const bundles = [
{
outputFile: 'path/to/layout.css',
files: ['path/to/layout.jsx']
},
// 捆绑器使用https://npmjs.com/package/fast-glob
// 你可以使用它的glob语法
{
outputFile: 'path/to/global.css',
files: ['path/**/*.jsx']
}
]);
