登录以解锁更多InfoQ新功能
获取更新并接收通知
给您喜爱的内容点赞
关注您喜爱的编辑与同行
966,690 十一月 独立访问用户
语言 & 开发
架构 & 设计
文化 & 方法
您目前处于：
你需要知道的CSS-in-JS
你需要知道的CSS-in-JS
Indrek Lasn
0&他的粉丝
12&他的粉丝
日. 估计阅读时间:
：Facebook、Snapchat、Tumblr等背后的核心技术
亲爱的读者：我们最近添加了一些个人消息定制功能，您只需选择感兴趣的技术主题，即可获取重要资讯的。
Author Contacted
此内容所在的主题为
语言 & 开发
107 他的粉丝
架构 & 设计
324 他的粉丝
0 他的粉丝
0 他的粉丝
0 他的粉丝
相关厂商内容
相关赞助商
告诉我们您的想法
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
允许的HTML标签: a,b,br,blockquote,i,li,pre,u,ul,p
当有人回复此评论时请E-mail通知我
赞助商链接
架构 & 设计
文化 & 方法
<及所有内容，版权所有 &#169;
C4Media Inc.
服务器由 提供, 我们最信赖的ISP伙伴。
北京创新网媒广告有限公司
京ICP备号-7
找回密码....
InfoQ账号使用的E-mail
关注你最喜爱的话题和作者
快速浏览网站内你所感兴趣话题的精选内容。
内容自由定制
选择想要阅读的主题和喜爱的作者定制自己的新闻源。
设置通知机制以获取内容更新对您而言是否重要
注意：如果要修改您的邮箱，我们将会发送确认邮件到您原来的邮箱。
使用现有的公司名称
修改公司名称为：
公司性质：
使用现有的公司性质
修改公司性质为:
使用现有的公司规模
修改公司规模为：
使用现在的国家
使用现在的省份
Subscribe to our newsletter?
Subscribe to our industry email notices?
我们发现您在使用ad blocker。
我们理解您使用ad blocker的初衷，但为了保证InfoQ能够继续以免费方式为您服务，我们需要您的支持。InfoQ绝不会在未经您许可的情况下将您的数据提供给第三方。我们仅将其用于向读者发送相关广告内容。请您将InfoQ添加至白名单，感谢您的理解与支持。相关文章推荐
React实战-一个非常棒的React与Material风格相结合的UI控件库（Material-UI）
ReactJs提供了JSX、UI更新机制、组件化原则等底层支持，但是正如我们在所有的程序语言...
Material-UI 是一套用React写成的，符合Google Material Design 的UI组件库。此库在编写的时候用到了ES6与ES7的一些特性，并用Babel构建，于是我稍作研究，给...
实现目标：Material-UI 是一套用React写成的，符合Google Material Design 的UI组件库。http://www./前端通过Materia...
Material UI 是一款功能非常强大，界面却十分清新简洁的CSS框架，Material UI利用了Google的Material Design 全新设计语言，并且让每一个UI组件都变得非常独立，...
两个效果，一个是从无到有循序渐进的下划线效果；一个是谷歌扁平化按钮点击填充效果--简单粗暴易上手...
问题这篇博客仅作为学习笔记，没有多少自己的东西，只有一个小误区，记录下来当做备忘。学习资料：
Immutable.js
Immutable 详解及 React 中实践
关于Immutable.js如何...
序言自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮...
序言上一篇中我们介绍了几个简单的新UI控件,相信很多小伙伴对Materil Design的视觉效果有了一定的了解,今天我们就继续介绍其他几个控件的玩儿法,让我们一探Materil Design的究竟,...
在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及Coord...
他的最新文章
讲师：董晓杰
讲师：姚远
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)CSS in JS in CSS
Once upon a time, HTML was the only language on the web. Styling was done with tables and color tags. Then CSS came along, and changed how we though about design. CSS selectors grew to let you target almost any element on your page in many many ways. Inline styles were shunned, to improve maintainability, and keeping you HTML free from junk.
A little down the road, we are told not to use the power of CSS selectors. We are now told to only use classes, and nothing else. And we’re now left to painfully go through our markup and styles and create a set of classnames that are unique but general.
At the same time CSS is still missing many features. In 2015, we can’t rely on CSS to have variables. Vjeux from the React time detailed these problems a few months ago in this talk.
Vjeux concludes that we should write our CSS in javascript for all the benefits that come from using a real programming language. He then suggests that we use inline styles as class names are now meaningless. He drives home that because we no longer have HTML (its all javascript with React), we no longer have any of the downsides of using inline styles.
We are going from this:
&div className="my-heading"&
&div style=styles.myHeading&
A string is replaced with a variable and we get rid of CSS completely. As a side benefit, using only inline styles removes stylesheet parsing selector matching, and actually improves performance.
This approach is quite great, especially on the upcoming React-Native. However, on the web CSS is still useful for certain things that are unnecessarily complicated in javascript, like :hover, :active etc. Sadly, as the community moved away from inline styles, the ability to target hover stated etc with them was never added. You NEED CSS if you want :hover. And if while we’re at it, media queries and pseudo elements would be nice too!
Vjeux actually agrees that inline styles are not suited for these cases.
I don’t recommend using inline styles for :hover. You lose accessibility features if you don’t use it :(— Vjeux (@Vjeux)
But let’s look at the CSS in JS concept again, and the problems it solves.
Global Namespaces
Dependencies
Dead Code Elimination
Minification
Sharing Constants
Non-Deterministic Resolution
Putting our CSS in Javascript and using inline styles solves all these problems. Why would we ever want to go back to the old ways?
But if we think about it, do we really need the styles to be inline? Of all the problems mentioned above, inline styles really only are required for Isolation. Or are they?
What if we could guarantee CSS selectors that would never leak? Managing class names is something that humans aren’t exactly great at. Most of us at least. But creating unique class names that target the elements exactly where we want is exactly what computers are great at. So why not let our CSS in JS actually create style tags, instead of using inline-styles?
I pulled down the React todomvc example and did just that. I built a quick and dirty CSS helper function that takes an object of styles and returns one or more classNames.
So now we went from this
&div className="my-heading"&
&div style=styles.myHeading&
to now this:
&div className=css(styles.myHeading)&
I don’t think that’s bad at all. But one more thing has changed a little to actually support pseudo elements and hover states etc.
The styles object is no longer a simple object of styles. From this:
styles.myHeading = {
color: 'black',
fontSize: 36
We now have:
styles.myHeading = {
color: 'black',
fontSize: 36
Not a big change. But why? Well now you can put all sorts of other pseudo selectors right there on an element:
We now have:
styles.myHeading = {
color: 'black',
fontSize: 36
'node:hover' : {
color: 'red'
'node::before' : {
content: '&'
This is where the css function comes into play. It maintains a cache of all styles already in the stylesheets. But instead of doing the usual classname to styles mapping, it actually stored the reverse. It keeps track of all the styles already present on the page, and stores an id for each one.
function addStyleString(str) {
var node = document.createElement('style')
node.innerHTML = str
document.body.appendChild(node)
function objToArray(obj){
return Object.keys(obj).sort().map(function(key){
return [key, obj[key]]
function arrayToCSS(arr){
return arr
.map(function(style){
return hyphenate(style[0]) + ':' + style[1] + ';'
.join('\n')
function hyphenate(string){
return Array.prototype.reduce.call(string, function(str, letter){
return letter.toLowerCase() === letter ? str + letter : str + '-' + letter.toLowerCase()
var cache = {}
var count = 0
function getIds(obj){
return Object.keys(obj)
.map(function(key){
return getId(key, obj[key])
.join(' ')
function getId(key, obj){
if(key.slice(0,4) !== 'node'){
var temp = {}
temp[key] = objToArray(obj)
var json = JSON.stringify(temp)
if(!cache[json]){
cache[json] = 'style-' + count
count = count + 1
addStyleString('.' + cache[json] + key.slice(4) + ' {\n' + arrayToCSS(temp[key]) + '\n }')
return cache[json]
module.exports = getIds
When you pass it an object of this sort, it first divides it into individual selectors. Then it checks it’s cache for whether these styles already exist there or not. If not it, creates a new unique classname and adds the style to its cache.
it checks the initial key for the word node and then takes everything after that and puts it as an actual pseudo selector in the CSS file, and everything works great!
This is of course an early early prototype and a lot of tooling and smarts could be built into the system. I imagine the following as just the initial ideas:
Build a simple development server. In development the css module can post back to the server for all the styles that are ever added to the page. For production based on the data collected, most of the styles are put into a css an actual css file, and the cache for the module can be pre-populated with those styles. This would minimize the style tags being added onto the page at run-time.
Add some obvious throttling and buffering to put multiple selectors into a single style tag and minimize DOM operations
Add functionality to be able to support media queries in the same way. If the word is followed by an @ we know it’s a media query.
I would love to hear what you think of this approach to CSS. Please let me know twitter : @naman34
Update: Just after posting this article I was point to projects that are trying to achieve something similar:
I think both projects have some good ideas. JSS, for example, has tackled the issue of redefining the same rule multiple times in JS using arrays.
However, JSS is pretty complicated to actually use. RCSS is very similar to how I wanted to solve the problem.
Instead of:
&div className=css(styles.myHeading)&
You now have this:
&div className=RCSS.registerClass(button).classname&
Don’t pay attention to the extra text, its almost the same workflow. The main difference is that you need to call this method somewhere:
RCSS.injectAll();
RCSS doesn’t automatically inject styles onto the page. You register styles and inject them manually. While I think this option can be useful, in general this is an extra step that no one wants to deal with.
I would think that an automatic inject on register is a good idea. Perhaps, with setImmediate/nextTick solution, to only inject once per event loop.
On the other hand, RCSS is still completely missing any solution for server-side rendering. JSS is better but not quite there either
UPDATE: Both RCSS and JSS have some ways to help with server-side rendering. Yet, both solutions leave a lot of room for improvement. With better tooling, things can be much better.
The next step here, in my opinion, is to bring some of the good ideas of JSS over to RCSS and then build good tooling around the system so that it works for all use cases with a good developer workflow. On the server and the client.
Update 2: After chatting with @oleg008 on the Gitter Channel for JSS, it turns out that JSS is essentially the same number of steps as RCSS. JSS has a special mixin for React that had me confused. Turns out that JSS has functionality that dynamically adds and removes styles from your page as react components are mounted and dismounted.
@oleg008 explained:
detaching 1 dom node per component will not impact the performance at all. if you application grows, selector engine needs to consider ALL selectors for EVERY element, this has a big impact on overall app perf
selector engine is fast, but if your styles become hundreds of kilobytes every node insert will feel this weight
This is not what I expected from browsers. I will try to set up some tests to find out more about the performance implications of removing styles from the page and finding out if it is faster than just leaving in extra styles on the page forever like the other solutions.精读《请停止 css-in-js 的行为》7 months agocss-modules顾名思义，css-modules 将 css 代码模块化，可以避免本模块样式被污染。并且可以很方便的复用 css 代码。// 全局变量
:global(.className) {
background-color: blue;
// 本地变量，其它模块无法污染
.className {
background-color: blue;
// 复用 className 类的样式
composes: className;
color: red;
react-css-modules值得一提的是，文章的作者也是
的作者。react-css-modules 代码示例：import React from 'react';
import CSSModules from 'react-css-modules';
import styles from './table.css';
class Table extends React.Component {
render () {
return &div styleName='table'&
&div styleName='row'&
&div styleName='cell'&A0&/div&
&div styleName='cell'&B0&/div&
export default CSSModules(Table, styles);
react-css-modules 引入了 styleName，将本地变量和全局变量很清晰的分开。并且也避免了每次对 styles 对象的引用，本地 className 名也不用总是写成 camelCase。另外，使用 react-css-modules，可以方便的覆盖本地变量的样式：import customStyles from './table-custom-styles.css';
&Table styles={customStyles} /&;
3 精读参与本次精读的同学有 ， 和 。该部分由他们的观点总结而出。CSS 本身有不少缺陷，如书写繁琐（不支持嵌套）、样式易冲突（没有作用域概念）、缺少变量（不便于一键换主题）等不一而足。为了解决这些问题，社区里的解决方案也是出了一茬又一茬，从最早的 CSS prepocessor（SASS、LESS、Stylus）到后来的后起之秀 PostCSS，再到 CSS Modules、Styled-Components 等。更有甚者，有人维护了一份完整的 。截至目前，已有 49 种之多。Styled-components 优缺点优点使用成本低如果是要做一个组件库，让使用方拿着 npm 就能直接用，样式全部自己搞定，不需要依赖其它组件，如 react-dnd 这种，比较适合。更适合跨平台适用于 react-native 这类本身就没有 css 的运行环境。缺陷缺乏扩展性样式就像小孩的脸，说变就变。比如是最简单的 button，可能在用的时候由于场景不同，就需要设置不同的 font-size，height，width，border 等等，如果全部使用 css-in-js 那将需要把每个样式都变成 props，如果这个组件的 dom 还有多层级呢？你是无法把所有样式都添加到 props 中。同时也不能全部设置成变量，那就丧失了单独定制某个组件的能力。css-in-js 生成的 className 通常是不稳定的随机串，这就给外部想灵活覆盖样式增加了困难。css-modules 优缺点优点1、CSS Modules 可以有效避免全局污染和样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力2、与 SCSS 对比，可以避免 className 的层级嵌套，只使用一个 className 就能把所有样式定义好。缺点：1、与组件库难以配合2、会带来一些使用成本，本地样式覆盖困难，写到最后可能一直在用 :global。关于 scss/less无论是 sass 还是 less 都有一套自己的语法，postcss 更支持了自定义语法，自创的语法最大特点就是雷同，格式又不一致，增加了无意义的学习成本。我们更希望去学习和使用万变不离其宗的东西，而不愿意使用各种定制的“语法糖”来“提高效率”。就 css 变量与 js 通信而言，虽然草案已经考虑到了这一点，通过表达式与 attribute 通信，使用 js 与 attribute 同步。不难想象，这种情况维护的变量值最终是存储在 js 中更加妥当，然而 scss 给大家带来的 css first 思想根深蒂固，导致许多基础库的变量完全存储在 _variable.scss 文件中，现在无论是想适应 css 的新特性，还使用 css-in-js 都有巨大的成本，导致项目几乎无法迁移。反过来，如果变量存储在 js 中，就像草案中说的一样轻巧，你只要换一种方式实现 css 就行了。总结在众多解决方案中，没有绝对的优劣。还是要结合自己的场景来决定。我们团队在使用过 scss 和 css modules 后，仍然又重新选择了使用 scss。css modules 虽然有效解决了样式冲突的问题，但是带来的使用成本也很大。尤其是在写动画（keyframe）的时候，语法尤其奇怪，总是出错，难以调试。并且我们团队在开发时，因为大家书写规范，也从来没有碰到过样式冲突的问题。Styled-components 笔者未曾使用过，但它消除人肉在 dom 和 css 之间做映射的优点，非常吸引我。而对于样式扩展的问题，其实也有。const CustomedButton = styled(Button)`
color: customedC
如果你想参与讨论，请，每周都有新的主题，每周五发布。74收藏分享举报文章被以下专栏收录前端界的好文精读，每周更新推荐阅读{&debug&:false,&apiRoot&:&&,&paySDK&:&https:\u002F\\u002Fapi\u002Fjs&,&wechatConfigAPI&:&\u002Fapi\u002Fwechat\u002Fjssdkconfig&,&name&:&production&,&instance&:&column&,&tokens&:{&X-XSRF-TOKEN&:null,&X-UDID&:null,&Authorization&:&oauth c3cef7c66aa9e6a1e3160e20&}}{&database&:{&Post&:{&&:{&isPending&:false,&contributes&:[{&sourceColumn&:{&lastUpdated&:,&description&:&&,&permission&:&COLUMN_PUBLIC&,&memberId&:19430,&contributePermission&:&COLUMN_PUBLIC&,&translatedCommentPermission&:&all&,&canManage&:true,&intro&:&前端界的好文精读，每周更新&,&urlToken&:&FrontendPerusal&,&id&:31361,&imagePath&:&v2-8dadc8a5ef80a350d4b00e7c0de873e3.jpg&,&slug&:&FrontendPerusal&,&applyReason&:&0&,&name&:&前端精读评论&,&title&:&前端精读评论&,&url&:&https:\u002F\\u002FFrontendPerusal&,&commentPermission&:&COLUMN_ALL_CAN_COMMENT&,&canPost&:true,&created&:,&state&:&COLUMN_NORMAL&,&followers&:3554,&avatar&:{&id&:&v2-8dadc8a5ef80a350d4b00e7c0de873e3&,&template&:&https:\u002F\\u002F{id}_{size}.jpg&},&activateAuthorRequested&:false,&following&:false,&imageUrl&:&https:\u002F\\u002Fv2-8dadc8a5ef80a350d4b00e7c0de873e3_l.jpg&,&articlesCount&:35},&state&:&accepted&,&targetPost&:{&titleImage&:&https:\u002F\\u002Fv2-cdfa87aa5215aaac1911ab1adf76c465_r.png&,&lastUpdated&:,&imagePath&:&v2-cdfa87aa5215aaac1911ab1adf76c465.png&,&permission&:&ARTICLE_PUBLIC&,&topics&:[,769],&summary&:&本周精读文章：\u003Ca href=\&https:\\u002Fstop-using-css-in-javascript-for-web-development-fa32fb873dcc\& data-editable=\&true\& data-title=\&请停止 css-in-js 的行为\&\u003E请停止 css-in-js 的行为\u003C\u002Fa\u003E1 引言这篇文章表面是在讲 CSS in JS，实际上是 CSS Modules 支持者与 styled-components 拥趸之间的唇枪舌剑、你来我往。从 2014 年 Vjeux 的演讲开始，css-in-js 的轮子层出不穷。终于过了三年，鸡血时期已经慢慢过…&,&copyPermission&:&ARTICLE_COPYABLE&,&translatedCommentPermission&:&all&,&likes&:0,&origAuthorId&:0,&publishedTime&:&T00:23:52+08:00&,&sourceUrl&:&&,&urlToken&:,&id&:2938385,&withContent&:false,&slug&:,&bigTitleImage&:false,&title&:&精读《请停止 css-in-js 的行为》&,&url&:&\u002Fp\u002F&,&commentPermission&:&ARTICLE_ALL_CAN_COMMENT&,&snapshotUrl&:&&,&created&:,&comments&:0,&columnId&:0,&content&:&&,&parentId&:0,&state&:&ARTICLE_PUBLISHED&,&imageUrl&:&https:\u002F\\u002Fv2-cdfa87aa5215aaac1911ab1adf76c465_r.png&,&author&:{&bio&:&前端工程师&,&isFollowing&:false,&hash&:&17eec1e046dfbcc70c3486&,&uid&:08,&isOrg&:false,&slug&:&huang-jason&,&isFollowed&:false,&description&:&\u002Fjasonhzq&,&name&:&Jason&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fhuang-jason&,&avatar&:{&id&:&e22abadbaabdfec&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.png&},&isOrgWhiteList&:false,&isBanned&:false},&memberId&:753552,&excerptTitle&:&&,&voteType&:&ARTICLE_VOTE_CLEAR&},&id&:645160}],&title&:&精读《请停止 css-in-js 的行为》&,&author&:&huang-jason&,&content&:&\u003Cp\u003E本周精读文章：\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fstop-using-css-in-javascript-for-web-development-fa32fb873dcc\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E请停止 css-in-js 的行为\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E\u003C\u002Fp\u003E\u003Ch1\u003E1 引言\u003C\u002Fh1\u003E\u003Cblockquote\u003E\u003Cp\u003E这篇文章表面是在讲 CSS in JS，实际上是 CSS Modules 支持者与 styled-components 拥趸之间的唇枪舌剑、你来我往。从 2014 年 Vjeux 的演讲开始，css-in-js 的轮子层出不穷。终于过了三年，鸡血时期已经慢慢过去，大家开始冷静思考了。\u003C\u002Fp\u003E\u003C\u002Fblockquote\u003E\u003Ch1\u003E2 内容概要\u003C\u002Fh1\u003E\u003Ch2\u003Estyled-components\u003C\u002Fh2\u003E\u003Cp\u003Estyled-components 利用 ES6 的 tagged template 语法创建 react 纯样式组件。消除了人肉在 dom 和 css 之间做映射和切换的痛苦，并且有大部分编辑器插件的大力支持（语法高亮等）。此外，styled-components 在 ReactNaive 中尤其适用。\u003C\u002Fp\u003E\u003Cp\u003Estyled-components 简单易学，引用官方源码：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E&#x27;react&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Estyled\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E&#x27;styled-components&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Econst\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ETitle\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Estyled\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Eh1\u003C\u002Fspan\u003E\u003Cspan class=\&sb\&\u003E`\u003C\u002Fspan\u003E\n\u003Cspan class=\&sb\&\u003E
font-size: 1.5\u003C\u002Fspan\u003E\n\u003Cspan class=\&sb\&\u003E
text-align:\u003C\u002Fspan\u003E\n\u003Cspan class=\&sb\&\u003E
color:\u003C\u002Fspan\u003E\n\u003Cspan class=\&sb\&\u003E`\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ETitle\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003EHello\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EWorld\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Ethis\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Eis\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Emy\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efirst\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Estyled\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Ecomponent\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E!\u003C\u002Fspan\u003E\n\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002FTitle&\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003Ecss-modules\u003C\u002Fh2\u003E\u003Cp\u003E顾名思义，css-modules 将 css 代码模块化，可以避免本模块样式被污染。并且可以很方便的复用 css 代码。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-css\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E\u002F\u002F\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E全局变量\u003C\u002Fspan\u003E\n\u003Cspan class=\&nd\&\u003E:global\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nc\&\u003E.className\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E)\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Ebackground-color\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eblue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&o\&\u003E\u002F\u002F\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E本地变量，其它模块无法污染\u003C\u002Fspan\u003E\n\u003Cspan class=\&nc\&\u003E.className\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Ebackground-color\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Eblue\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&nc\&\u003E.title\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E\u002F\u002F\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E复用\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003EclassName\u003C\u002Fspan\u003E \u003Cspan class=\&err\&\u003E类的样式\u003C\u002Fspan\u003E\n
\u003Cspan class=\&n\&\u003Ecomposes\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&n\&\u003EclassName\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nb\&\u003Ecolor\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E:\u003C\u002Fspan\u003E \u003Cspan class=\&nb\&\u003Ered\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch2\u003Ereact-css-modules\u003C\u002Fh2\u003E\u003Cp\u003E值得一提的是，文章的作者也是 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fgajus\u002Freact-css-modules\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003Ereact-css-modules\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E 的作者。\u003C\u002Fp\u003E\u003Cp\u003Ereact-css-modules 代码示例：\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E&#x27;react&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ECSSModules\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E&#x27;react-css-modules&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003Cspan class=\&kr\&\u003Eimport\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Estyles\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Efrom\u003C\u002Fspan\u003E \u003Cspan class=\&s1\&\u003E&#x27;.\u002Ftable.css&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eclass\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ETable\u003C\u002Fspan\u003E \u003Cspan class=\&kr\&\u003Eextends\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EReact\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E.\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EComponent\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&nx\&\u003Erender\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E()\u003C\u002Fspan\u003E \u003Cspan class=\&p\&\u003E{\u003C\u002Fspan\u003E\n
\u003Cspan class=\&k\&\u003Ereturn\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EstyleName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E&#x27;table&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EstyleName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E&#x27;row&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EstyleName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E&#x27;cell&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EA0\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003Ediv\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003EstyleName\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E\u003Cspan class=\&s1\&\u003E&#x27;cell&#x27;\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EB0\u003C\u002Fspan\u003E\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&\u003C\u002Fspan\u003E\n
\u003Cspan class=\&o\&\u003E&\u003C\u002Fspan\u003E\u003Cspan class=\&err\&\u003E\u002Fdiv&;\u003C\u002Fspan\u003E\n
\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\u003Cspan class=\&p\&\u003E}\u003C\u002Fspan\u003E\n\n\u003Cspan class=\&kr\&\u003Eexport\u003C\u002Fspan\u003E \u003Cspan class=\&k\&\u003Edefault\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ECSSModules\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003ETable\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E,\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Estyles\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E);\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003Ereact-css-modules 引入了 styleName，将本地变量和全局变量很清晰的分开。并且也避免了每次对 styles 对象的引用，本地 className 名也不用总是写成 camelCase。\u003C\u002Fp\u003E\u003Cp\u003E另外，使用 react-css-modules，可以方便的覆盖本地变量的样式：\u003C\u002Fp\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-text\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003Eimport customStyles from &#x27;.\u002Ftable-custom-styles.css&#x27;;\n\n&Table styles={customStyles} \u002F&;\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Ch1\u003E3 精读\u003C\u002Fh1\u003E\u003Cp\u003E参与本次精读的同学有 \u003Ca href=\&https:\u002F\\u002Fpeople\u002Fhuang-zi-yi-83\u002Fanswers\& class=\&internal\&\u003E黄子毅\u003C\u002Fa\u003E，\u003Ca href=\&https:\u002F\\u002Fpeople\u002Fyangsen\u002Fanswers\& class=\&internal\&\u003E杨森\u003C\u002Fa\u003E 和 \u003Ca href=\&https:\u002F\\u002Fpeople\u002Fcamsong\u002Fanswers\& class=\&internal\&\u003Ecamsong\u003C\u002Fa\u003E。该部分由他们的观点总结而出。\u003C\u002Fp\u003E\u003Cp\u003ECSS 本身有不少缺陷，如书写繁琐（不支持嵌套）、样式易冲突（没有作用域概念）、缺少变量（不便于一键换主题）等不一而足。为了解决这些问题，社区里的解决方案也是出了一茬又一茬，从最早的 CSS prepocessor（SASS、LESS、Stylus）到后来的后起之秀 PostCSS，再到 CSS Modules、Styled-Components 等。更有甚者，有人维护了一份完整的 \u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002FMicheleBertoli\u002Fcss-in-js\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003ECSS in JS 技术方案的对比\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。截至目前，已有 49 种之多。\u003C\u002Fp\u003E\u003Ch2\u003EStyled-components 优缺点\u003C\u002Fh2\u003E\u003Ch3\u003E优点\u003C\u002Fh3\u003E使用成本低\u003Cp\u003E如果是要做一个组件库，让使用方拿着 npm 就能直接用，样式全部自己搞定，不需要依赖其它组件，如 react-dnd 这种，比较适合。\u003C\u002Fp\u003E更适合跨平台\u003Cp\u003E适用于 react-native 这类本身就没有 css 的运行环境。\u003C\u002Fp\u003E\u003Ch3\u003E缺陷\u003C\u002Fh3\u003E缺乏扩展性\u003Cp\u003E样式就像小孩的脸，说变就变。比如是最简单的 button，可能在用的时候由于场景不同，就需要设置不同的 font-size，height，width，border 等等，如果全部使用 css-in-js 那将需要把每个样式都变成 props，如果这个组件的 dom 还有多层级呢？你是无法把所有样式都添加到 props 中。同时也不能全部设置成变量，那就丧失了单独定制某个组件的能力。css-in-js 生成的 className 通常是不稳定的随机串，这就给外部想灵活覆盖样式增加了困难。\u003C\u002Fp\u003E\u003Ch2\u003Ecss-modules 优缺点\u003C\u002Fh2\u003E\u003Ch3\u003E优点\u003C\u002Fh3\u003E\u003Cp\u003E1、CSS Modules 可以有效避免全局污染和样式冲突，能最大化地结合现有 CSS 生态和 JS 模块化能力\u003C\u002Fp\u003E\u003Cp\u003E2、与 SCSS 对比，可以避免 className 的层级嵌套，只使用一个 className 就能把所有样式定义好。\u003C\u002Fp\u003E\u003Ch3\u003E缺点：\u003C\u002Fh3\u003E\u003Cp\u003E1、与组件库难以配合\u003C\u002Fp\u003E\u003Cp\u003E2、会带来一些使用成本，本地样式覆盖困难，写到最后可能一直在用 :global。\u003C\u002Fp\u003E\u003Ch2\u003E关于 scss\u002Fless\u003C\u002Fh2\u003E\u003Cp\u003E无论是 sass 还是 less 都有一套自己的语法，postcss 更支持了自定义语法，自创的语法最大特点就是雷同，格式又不一致，增加了无意义的学习成本。我们更希望去学习和使用万变不离其宗的东西，而不愿意使用各种定制的“语法糖”来“提高效率”。\u003C\u002Fp\u003E\u003Cp\u003E就 css 变量与 js 通信而言，虽然草案已经考虑到了这一点，通过表达式与 attribute 通信，使用 js 与 attribute 同步。不难想象，这种情况维护的变量值最终是存储在 js 中更加妥当，然而 scss 给大家带来的 css first 思想根深蒂固，导致许多基础库的变量完全存储在 _variable.scss 文件中，现在无论是想适应 css 的新特性，还使用 css-in-js 都有巨大的成本，导致项目几乎无法迁移。反过来，如果变量存储在 js 中，就像草案中说的一样轻巧，你只要换一种方式实现 css 就行了。\u003C\u002Fp\u003E\u003Ch1\u003E总结\u003C\u002Fh1\u003E\u003Cp\u003E在众多解决方案中，没有绝对的优劣。还是要结合自己的场景来决定。\u003C\u002Fp\u003E\u003Cp\u003E我们团队在使用过 scss 和 css modules 后，仍然又重新选择了使用 scss。css modules 虽然有效解决了样式冲突的问题，但是带来的使用成本也很大。尤其是在写动画（keyframe）的时候，语法尤其奇怪，总是出错，难以调试。并且我们团队在开发时，因为大家书写规范，也从来没有碰到过样式冲突的问题。\u003C\u002Fp\u003E\u003Cp\u003EStyled-components 笔者未曾使用过，但它消除人肉在 dom 和 css 之间做映射的优点，非常吸引我。而对于样式扩展的问题，其实也有\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fstyled-components\u002Fstyled-components%23user-content-overriding-component-styles\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E比较优雅的方式\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E。\u003C\u002Fp\u003E\u003Cbr\u003E\u003Cdiv class=\&highlight\&\u003E\u003Cpre\u003E\u003Ccode class=\&language-js\&\u003E\u003Cspan\u003E\u003C\u002Fspan\u003E\u003Cspan class=\&kr\&\u003Econst\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003ECustomedButton\u003C\u002Fspan\u003E \u003Cspan class=\&o\&\u003E=\u003C\u002Fspan\u003E \u003Cspan class=\&nx\&\u003Estyled\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E(\u003C\u002Fspan\u003E\u003Cspan class=\&nx\&\u003EButton\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E)\u003C\u002Fspan\u003E\u003Cspan class=\&sb\&\u003E`\u003C\u002Fspan\u003E\n\u003Cspan class=\&sb\&\u003E
color: customedC\u003C\u002Fspan\u003E\n\u003Cspan class=\&sb\&\u003E`\u003C\u002Fspan\u003E\u003Cspan class=\&p\&\u003E;\u003C\u002Fspan\u003E\n\u003C\u002Fcode\u003E\u003C\u002Fpre\u003E\u003C\u002Fdiv\u003E\u003Cp\u003E如果你想参与讨论，请\u003Ca href=\&http:\u002F\\u002F?target=https%3A\\u002Fdt-fe\u002Fweekly\& class=\& wrap external\& target=\&_blank\& rel=\&nofollow noreferrer\&\u003E点击这里\u003Ci class=\&icon-external\&\u003E\u003C\u002Fi\u003E\u003C\u002Fa\u003E，每周都有新的主题，每周五发布。\u003C\u002Fp\u003E&,&updated&:new Date(&T16:23:52.000Z&),&canComment&:false,&commentPermission&:&anyone&,&commentCount&:20,&collapsedCount&:0,&likeCount&:74,&state&:&published&,&isLiked&:false,&slug&:&&,&isTitleImageFullScreen&:false,&rating&:&none&,&titleImage&:&https:\u002F\\u002Fv2-cdfa87aa5215aaac1911ab1adf76c465_r.png&,&links&:{&comments&:&\u002Fapi\u002Fposts\u002F2Fcomments&},&reviewers&:[],&topics&:[{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&React&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&CSS&},{&url&:&https:\u002F\\u002Ftopic\u002F&,&id&:&&,&name&:&JavaScript&}],&adminClosedComment&:false,&titleImageSize&:{&width&:450,&height&:453},&href&:&\u002Fapi\u002Fposts\u002F&,&excerptTitle&:&&,&tipjarState&:&inactivated&,&annotationAction&:[],&sourceUrl&:&&,&pageCommentsCount&:20,&hasPublishingDraft&:false,&snapshotUrl&:&&,&publishedTime&:&T00:23:52+08:00&,&url&:&\u002Fp\u002F&,&lastestLikers&:[{&bio&:&&,&isFollowing&:false,&hash&:&4caaa0d870fa941fbfc755b&,&uid&:96,&isOrg&:false,&slug&:&gao-zhen-dong-45&,&isFollowed&:false,&description&:&&,&name&:&高振东&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fgao-zhen-dong-45&,&avatar&:{&id&:&0a5bfaaa508daeb8b4e796&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.png&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&2875ecf53b3e47bfea9be9d35ecac53f&,&uid&:48,&isOrg&:false,&slug&:&jiang-nan-93-78&,&isFollowed&:false,&description&:&&,&name&:&姜小芽儿&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fjiang-nan-93-78&,&avatar&:{&id&:&0b736aae787&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&2b5c5f13a2acef86fa47d1&,&uid&:022100,&isOrg&:false,&slug&:&zhou-zhi-ying-22&,&isFollowed&:false,&description&:&&,&name&:&周志颖&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fzhou-zhi-ying-22&,&avatar&:{&id&:&v2-aed061b0ec&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&To Be a Better Coder&,&isFollowing&:false,&hash&:&4eca5e5ce0a3&,&uid&:80,&isOrg&:false,&slug&:&manbaum&,&isFollowed&:false,&description&:&:_)=窝型逗缴逗你弯儿&,&name&:&张砸锅&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fmanbaum&,&avatar&:{&id&:&e1b54aa24&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false},{&bio&:&&,&isFollowing&:false,&hash&:&88e34d15d5d240e16df414d&,&uid&:078100,&isOrg&:false,&slug&:&chemarys&,&isFollowed&:false,&description&:&the road is long，we carry on&,&name&:&chemarys&,&profileUrl&:&https:\u002F\\u002Fpeople\u002Fchemarys&,&avatar&:{&id&:&v2-1b3bfd756d311db8ac569cb&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.jpg&},&isOrgWhiteList&:false,&isBanned&:false}],&summary&:&本周精读文章：\u003Ca href=\&https:\\u002Fstop-using-css-in-javascript-for-web-development-fa32fb873dcc\& data-editable=\&true\& data-title=\&请停止 css-in-js 的行为\&\u003E请停止 css-in-js 的行为\u003C\u002Fa\u003E1 引言这篇文章表面是在讲 CSS in JS，实际上是 CSS Modules 支持者与 styled-components 拥趸之间的唇枪舌剑、你来我往。从 2014 年 Vjeux 的演讲开始，css-in-js 的轮子层出不穷。终于过了三年，鸡血时期已经慢慢过…&,&reviewingCommentsCount&:0,&meta&:{&previous&:null,&next&:null},&annotationDetail&:null,&commentsCount&:20,&likesCount&:74,&FULLINFO&:true}},&User&:{&huang-jason&:{&isFollowed&:false,&name&:&Jason&,&headline&:&\u002Fjasonhzq&,&avatarUrl&:&https:\u002F\\u002F50\u002Fe22abadbaabdfec_s.png&,&isFollowing&:false,&type&:&people&,&slug&:&huang-jason&,&bio&:&前端工程师&,&hash&:&17eec1e046dfbcc70c3486&,&uid&:08,&isOrg&:false,&description&:&\u002Fjasonhzq&,&badge&:{&identity&:null,&bestAnswerer&:null},&profileUrl&:&https:\u002F\\u002Fpeople\u002Fhuang-jason&,&avatar&:{&id&:&e22abadbaabdfec&,&template&:&https:\u002F\\u002F50\u002F{id}_{size}.png&},&isOrgWhiteList&:false,&isBanned&:false}},&Comment&:{},&favlists&:{}},&me&:{},&global&:{&experimentFeatures&:{&ge3&:&ge3_9&,&ge2&:&ge2_1&,&nwebStickySidebar&:&sticky&,&androidPassThroughPush&:&all&,&newMore&:&new&,&newAppViewRelatedAd&:&yes&,&liveReviewBuyBar&:&live_review_buy_bar_2&,&qawebRelatedReadingsContentControl&:&open&,&liveStore&:&ls_a2_b2_c1_f2&,&qawebThumbnailAbtest&:&new&,&iOSEnableFeedModuleWWANAritclePreRender&:&iOS_FeedModule_WWAN_PreRender_Enable&,&isOffice&:&false&,&enableTtsPlay&:&false&,&liveDetailWechatBanner&:&Live_detail_wechat_banner_1&,&wechatShareModal&:&wechat_share_modal_show&,&newLiveFeedMediacard&:&old&,&homeUi2&:&default&,&showVideoUploadAttention&:&false&,&recommendationAbtest&:&new&,&marketTab&:&market_tab_old&,&qrcodeLogin&:&qrcode&,&isShowUnicomFreeEntry&:&unicom_free_entry_off&,&newMobileColumnAppheader&:&new_header&,&androidDbCommentWithRepinRecord&:&open&,&androidDbRecommendAction&:&open&,&zcmLighting&:&zcm&,&favAct&:&default&,&appStoreRateDialog&:&close&,&mobileQaPageProxyHeifetz&:&m_qa_page_nweb&,&default&:&None&,&isNewNotiPanel&:&yes&,&androidDbRepinSelection&:&open&,&nwebRelatedAdvert&:&default&,&qaStickySidebar&:&sticky_sidebar&,&androidProfilePanel&:&panel_b&,&nwebWriteAnswer&:&experiment&}},&columns&:{&next&:{}},&columnPosts&:{},&columnSettings&:{&colomnAuthor&:[],&uploadAvatarDetails&:&&,&contributeRequests&:[],&contributeRequestsTotalCount&:0,&inviteAuthor&:&&},&postComments&:{},&postReviewComments&:{&comments&:[],&newComments&:[],&hasMore&:true},&favlistsByUser&:{},&favlistRelations&:{},&promotions&:{},&switches&:{&couldSetPoster&:false},&draft&:{&titleImage&:&&,&titleImageSize&:{},&isTitleImageFullScreen&:false,&canTitleImageFullScreen&:false,&title&:&&,&titleImageUploading&:false,&error&:&&,&content&:&&,&draftLoading&:false,&globalLoading&:false,&pendingVideo&:{&resource&:null,&error&:null}},&drafts&:{&draftsList&:[],&next&:{}},&config&:{&userNotBindPhoneTipString&:{}},&recommendPosts&:{&articleRecommendations&:[],&columnRecommendations&:[]},&env&:{&edition&:{&baidu&:false,&yidianzixun&:false,&qqnews&:false},&isAppView&:false,&appViewConfig&:{&content_padding_top&:128,&content_padding_bottom&:56,&content_padding_left&:16,&content_padding_right&:16,&title_font_size&:22,&body_font_size&:16,&is_dark_theme&:false,&can_auto_load_image&:true,&app_info&:&OS=iOS&},&isApp&:false,&userAgent&:{&ua&:&Mozilla\u002F5.0 (compatible, MSIE 11, Windows NT 6.3; Trident\u002F7.0; rv:11.0) like Gecko&,&browser&:{&name&:&IE&,&version&:&11&,&major&:&11&},&engine&:{&version&:&7.0&,&name&:&Trident&},&os&:{&name&:&Windows&,&version&:&8.1&},&device&:{},&cpu&:{}}},&message&:{&newCount&:0},&pushNotification&:{&newCount&:0}}}