在开发React应用程序时，更大的挑战之一是为应用程序选择合适的样式解决方案。因为我们需要考虑风格的可维护性、开发体验以及风格对应用性能的影响。基于这些考虑，很多开发者会选择使用CSS-in-JS的方案。CSS-in-JS解决方案使用javascript编写应用程序样式。这有助于提高样式的可维护性，在编写样式的过程中使用更加模块化的方法，并在React应用程序中引入“动态样式”。目前市场上有很多CSS-in-JS解决方案。本文选择比较常用的两种方案Linaria和Styled-components进行对比。在本文中，我们将回顾这两个流行的CSS-in-JS解决方案：Linaria和Styled-components。我们将一起研究它们的功能，比较它们的功能差异、性能和生态。CSS-in-JS解决方案CSS-in-JS解决方案为我们提供了一种新的编写CSS的方式。这些解决方案使用基于javascript的API来创建和创作样式。主要优点包括：动态样式：允许开发者编写动态CSS元素范围：可以固定样式在某些元素上的范围剔除无用代码：自动去除应用中多余的CSS代码支持自定义主题安装和设置简单支持ESmodulesandscope更容易编写单元测试性能改进支持SSR支持所有CSS语法LinariaLinaria是最流行的CSS-in-JS解决方案之一，GitHub有7.1kstars和260forks。Linaria是一种“零运行时”方法，这意味着它在构建时将开发人员编写的样式代码转换为单个.css文件。这种行为类似于许多CSS预处理器，例如SASS，LESS提供了许多功能，包括：提供用于创建CSS类的API。“css”API允许开发者创建样式的选择，它也支持模板语法来满足我们需要插入动态值的时候。从'@linaria/core'导入{css}；constred="red"constheader=css`text-transform:uppercase;颜色：${red}`;Helloworld;它还提供了一个可以创建元素的API。“styled”API允许开发人员创建任何元素，例如：div、p等。当然这个API也支持模板语法插入对应的变量值import{styled}from'@linaria/react'constContainer=styled.div`font-size:35px;红色;边框：1px纯红色；&:hover{边框颜色：蓝色；}h1{margin-bottom:24px;}`;constApp=()=>{returnHelloWorld
}exportdefaultApp;它通过ReactProps或常规变量管理动态样式。在下面的代码中，我们通过React组件将props和一些常规变量传递给另一个元素import{styled}from'@linaria/react';constTitle=styled.h1`constmedium=30constNavbar=styled.nav`font-size:${medium}px;颜色：${props=>props.color};边框：1px纯红色；&:hover{边框颜色：蓝色；}${Title}{margin-bottom:24px;}`;constApp=()=>{returnHelloworld}exportdefaultApp;其他功能包括：通过CSSsourcemaps，很容易找到定义样式变量的地方。您可以在JS代码中启用CSSLint。https://github.com/stylelint/...通过@linaria/atomic支持原子样式Styled-ComponentsStyled-Components也是流行的CSS-in-JS解决方案之一。在GitHub上有3.72万颗星和2.3万个分叉。Styled-components允许开发人员通过编写真正的CSS代码来修改组件的样式。它在组件和样式之间创建了一个抽象层，从而消除了直接映射。提供的功能包括：自动提取关键CSS和代码拆分：Styled-Components监控组件，并在组件呈现到页面时为组件插入必要的样式代码。同时支持代码拆分，加速组件加载。为样式生成唯一的类名，以防止样式覆盖、拼写错误和冗余。Styled-component还通过props或常规变量为元素提供动态值注入。“样式化”API允许开发人员创建选择的元素。与Linaria一样，Styled-component也支持大致相同的模板语法importstyledfrom'styled-components';constButton=styled.button`background:${props=>props.primary?“palevioletred”：“白色”};颜色：${props=>props.primary?“白色”：“palevioletred”};字体大小：1em；保证金：1em；填充：0.25em1em；border:2pxsolidpalevioletred;border-radius:3px;`;constApp=()=>{returnPrimary
}exportdefaultApp;样式扩展：Styled-Components允许通过styledimportstyledfrom'styled-components'扩展现有样式；constButton=styled.button`color:palevioletred;字体大小：1em；保证金：1em；填充：0.25em1em；border:2pxsolidpalevioletred;border-radius:3px;`;constTomatoButton=styled(Button)`color:tomato;border-color:tomato;`;constApp=()=>{return番茄按钮
}exportdefaultApp;其他功能，包括：维护成本低，更容易删除不必要的CSS支持SSR支持主题定制比较Linaria和Styled-Components开发者长期以来一直在为他们的项目选择最合适的样式方案，Linaria和Styled-Components无疑是其中最好的接下来，我们将从“功能”、“性能”和“生态”三个方面对这两种解决方案进行比较。FunctionLinaria是一个“零运行时”的解决方案，这意味着样式文件将在构建时单独提取到CSS文件中；Styled-Components是在构建时通过javascript注入CSS，不会产生额外的CSS文件。它们都有相似的CSS语法（如Sass风格）。在React应用中，基于Prop实现变量注入（原理是利用CSS变量）可以通过CSSsourcemaps快速找到，通过stylelint解决方案可以查看CSS变量定义的位置。两者都使用Javascript来组织代码逻辑，并且可以在不使用CSS预处理器的情况下替代Sass或PostCSS。通过上述方案，我们发现Linaria和Styled-Components的API比较相似，因此开发者可以很容易地从一种方案迁移到另一种方案。基于请求的性能对比在生产环境中，Linaria会额外生成.css文件，这会导致CSS文件体积增大，文件数量增加，请求数量增加。对于Styled-Components，同样情况下，CSS文件的大小和数量无疑会更小，但会增加JSbundle的大小很多争论认为Linaria生成的css文件影响相对较小性能上。与Styled-Components相比，Linaria不会增加JSbundle的大小。这是一个更好的选择；而其他人则认为Linaria增加了消除冗余CSS代码的可能性。我们可以在这里看到更多关于请求的性能比较。基于页面加载的性能比较。添加各种页面加载标准后，我们??发现使用Linaria的大多数页面的加载性能优于使用Styled-Components。一个更重要的原因是Linaria导致的CSS资源大小和数量的增加对页面加载的影响小于Styled-Components导致的JS包大小的增加。我们可以从以下信息中看到更多关于加载的比较https://github.com/geeky-biz/...https://pustelto.com/blog/css...基于渲染和用户交互的性能比较比较这方面主要是页面元素的拖拽交互和重新渲染；结果表明，大部分Linaria的脚本运行时间会更少，样式重绘和回流更少我们可以从以下信息中看到更多关于渲染的比较https://github.com/geeky-biz/...https://pustelto.com/blog/css...EcosystemStyled-components目前拥有37.2KGitHubstars，2.3KGitHubforks，每周超过400万的NPM包下载量，可以说是CSS-in最大的生态系统解决方案-JS;而Linaria只有7.1KGitHub星数、260个GitHub分支和每周16,000个NPM包下载量。这意味着Styled-components将会有更大的社区和讨论热情，更多的课程（学习成本低），更多的问题解答等。综上所述，我们在本文中首先介绍了Linaria和Styled-Component的使用。然后比较两者的功能、性能特点和生态系统。本文代码地址：LinariaStyled-Component参考https://blog.openreplay.com/c...https://pustelto.com/blog/css...https://github.com/geeky-biz/...
