用了一阵子的styled-component ，最近把大部分的地方用回了CSS，为什么？且听我慢慢道来。

styled-component 很好

初遇styled-component，第一感觉就是，简直了，这不给它用爆？很多地方用起来那是非常的方便，随便挑个例子：把一个按钮（button）的字变成灰色的。

最开始我的写法：

<button style={color: "gray"} />

styled-component的写法：

const Button = styled.button`
  color: gray;
`
<Button />

让我不由的眼前一亮，这太美好了，这么个button，我就可以到处用了。

还有更妙的地方，这个Button本身，还能继续继承下去，比如我需要一个红底灰字的按钮：

const RedButton = styled(Button)`
  background-color: red;
`

还有一点是因为我真的不喜欢React下style的写法，其本质上是一个map，其中每个field用的是驼峰的命名法（CamelCase），和CSS常用的烤串命名实在是搞的我很精分。

于是年轻冲动的我，花了一下午，把很多React的部件改成了基于styled-component。

styled-component 的不好

就这么断断续续搞了小半年，虽然也没怎么更新网站，但是多多少少会鼓捣点东西，结果我发现，嘿，冲动了，白给了。

想象一下你写了一个非常fancy的div：

const MainDiv = styled.div`
  padding-left: 2rem;
  margin-right: 2rem;
  ...
`

现在有一个地方，可以用上一个差不多，但是有细微差异的div，咋搞？基于styled-component的做法就是继承这个MainDiv，然后去覆盖已有的属性。这就让component用起来很不舒服，还平白无故多出来一个component，如果很多地方能用那另说，现在又只能用在一个地方，简直就是跟程序员对着干，大逆不道。众所周知，我们都喜欢写一行代码然后哪里都能用（Java：你在教我做事？）。

所以到底是为什么？

个人认为，这只能说是适用场景的问题。styled-component肯定是有它好用的地方，比如一个卖点就是“server side rendering”：

styled-components supports concurrent server side rendering, with stylesheet rehydration.

问题是，搞个小网站，用不到啊。

其次结合最近的工作，有一个观念深得我心，就是module > inheritance。简单来说就是能通过增加module来达到目的，那就不要用继承，这样各个部分之间的耦合很小，很方便。从这个角度看，CSS的class用起来就很方便了呢！

年轻冲动的我，又花了两个下午，升级了一整套的“层叠样式表“（CSS：给我好好说话！），用的是“语法牛逼样式表”（SCSS：抽你嗷！）。不过在一些局部的地方，还是保留了styled-component，这次双剑合一，感觉搞对了。

小结

搞个小网站纯粹是个人爱好，顺便学点东西。虽然不是专业搞前端，但是知识这个东西，是可以互通有无的，所以还是感觉学到了不少。