摘要：前言官方文档地址中文文档地址是一个的第三方库，是的优秀实践。初次了解是在读林昊翻译的设计模式与最佳实践一书时。能力所限，已翻译部分可能仍有字词错误或语句不通顺的地方，欢迎有能力的同学帮助纠正。就是其中的佼佼者。
前言
官方文档地址： https://www.styled-components.com/
中文文档地址：https://github.com/hengg/styled-components-docs-zh
styled-components是一个React的第三方库，是CSS in JS的优秀实践。
初次了解styled-components是在读林昊翻译的React设计模式与最佳实践一书时。虽然接触的比较晚，但深深的被它的强大和优雅所吸引。然而其中文资料比较匮乏，为帮助更多的小伙伴了解这个强大的工具，翻译了部分官方文档。能力所限，已翻译部分可能仍有字词错误或语句不通顺的地方，欢迎有能力的同学帮助纠正。
styled-components究竟强在哪里？这要从它所解决的问题说起：
CSS 的痛点不可否认，CSS是一门神奇的“语言”（What kind of language is CSS?）。
它易于上手、却难以精通。它没有变量、函数等概念导致它的表现力要稍弱于其它语言，而它索要解决的问题却又很复杂。 关于这一点，为什么 CSS 这么难学？这个问题下的一百多个答案就很能说明问题了。
日常使用中，CSS 的痛点很多，但大多围绕以下两点：
全局污染：CSS 选择器的作用域是全局的，所以很容易引起选择器冲突；而为了避免全局冲突，又会导致类命名的复杂度上升
复用性低：CSS 缺少抽象的机制，选择器很容易出现重复，不利于维护和复用
CSS in JS随着组件化时代的来临，前端应用开始从组件的层面对 CSS 进行封装：也就是通过 JS 来声明、抽象样式从而提高组件的可维护性；在组件加载时动态的加载样式，动态生成类名从而避免全局污染。
styled-components就是其中的佼佼者。
顾名思义，styled-components以组件的形式来声明样式，让样式也成为组件从而分离逻辑组件与展示组件（这个思路看起来是不是很眼熟），来看一下官方的示例：
const Button = styled.a`
/* This renders the buttons above... Edit me! */
display: inline-block;
border-radius: 3px;
padding: 0.5rem 0;
margin: 0.5rem 1rem;
width: 11rem;
background: transparent;
color: white;
border: 2px solid white;
/* The GitHub button is a primary button
* edit this to target it specifically! */
${props => props.primary && css`
background: white;
color: palevioletred;
`}
`
render(
)
可以看到，styled-components通过标记的模板字符来设置组件样式.
它移除了组件和样式之间的映射.当我们通过styled-components定义样式时,我们实际上是创建了一个附加了样式的常规 React 组件.
同时它支持将props以插值的方式传递给组件,以调整组件样式.
官方宣称styled-components的优点如下：
Automatic critical CSS: styled-components 持续跟踪页面上渲染的组件,并向自动其注入且仅注入样式. 结合使用代码拆分, 可以实现仅加载所需的最少代码.
解决了 class name 冲突: styled-components 为样式生成唯一的 class name. 开发者不必再担心 class name 重复,覆盖和拼写错误的问题.
CSS 更容易移除: 想要确切的知道代码中某个 class 在哪儿用到是很困难的. 使用 styled-components 则很轻松, 因为每个样式都有其关联的组件. 如果检测到某个组件未使用并且被删除,则其所有的样式也都被删除.
简单的动态样式: 可以很简单直观的实现根据组件的 props 或者全局主题适配样式,无需手动管理数十个 classes.
无痛维护: 无需搜索不同的文件来查找影响组件的样式.无论代码多庞大，维护起来都是小菜一碟。
自动提供前缀: 按照当前标准写 CSS,其余的交给 styled-components 处理.
题外话CSS 的问题，也有其他解决方案，比如著名的CSS Module方案。社区中也一直存在对于两者孰优孰劣的争执。
本文不会比较这两种解决方案，但有兴趣的朋友可以参考一下这两篇文章：
Styled Components: To Use or Not to Use?
Stop using CSS in JavaScript for web development
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/114237.html
摘要：前言官方文档地址中文文档地址是一个的第三方库，是的优秀实践。初次了解是在读林昊翻译的设计模式与最佳实践一书时。能力所限，已翻译部分可能仍有字词错误或语句不通顺的地方，欢迎有能力的同学帮助纠正。就是其中的佼佼者。 前言 官方文档地址： https://www.styled-components.com/ 中文文档地址：https://github.com/hengg/styled-com...
摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。 前言 前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议： 如果对Weex App感兴趣，应该选择vue框架； 如果...
摘要：官方文档中文翻译构建用户界面的库。官方文档建议学习时以官方文档为准，中文翻译或者第三方作者的教程可以帮助你理清思路会用到的重要知识点我也会进行简明的解释，如遇到错误或者不理解的内容，欢迎实时指出。 前言 前面提到前端大统一的概念，如果感兴趣，欢迎说说自己的看法，点击前往。Web前端框架层出不穷，不可能面面俱到，这里给个小建议： 如果对Weex App感兴趣，应该选择vue框架； 如果...
摘要：本文经授权转自社区文档页面项目团队在定制编码规范，发现原本的已经有点年久失修。并且没有遵循中文文案排版指北规范在书写文档，而我们团队的文案统一遵循排版指北的标准，犹豫之下就自己的一个，并翻译了缓存接口还有大部分的消息接口规范。 本文经授权转自 PHPHub 社区 showImg(https://segmentfault.com/img/remote/1460000006780523);...
摘要：前端日报精选作者的构思和演绎翻译新特性大杀器和把动画转换成原生动画菜鸟的学习之路中文旧文与知乎专栏旧文新读解释闭包需要几行代码知乎专栏前端校招总结个人文章函数式编程系列优雅的使用进行函数编程掘金微软谷歌三星将一起构建的统一文档 2017-10-20 前端日报 精选 React作者的构思和演绎（翻译）Make React Great Again —— React v16 新特性大杀器Bo...
阅读 2595·2023-04-25 15:07
阅读 704·2021-11-24 10:21
阅读 2298·2021-09-22 10:02
阅读 3516·2019-08-30 15:43
阅读 3221·2019-08-30 13:03
阅读 2286·2019-08-29 17:18
阅读 3585·2019-08-29 17:07
阅读 1871·2019-08-29 12:27
