最近使用了Styled Components来写css，幸福感增加了不少。在介绍Styled Components有多好之前，我们来看看之前的css组织方式有多差吧。
常规css：永远解不开的线团
写css，最繁琐最容易出错的地方就是给css class起名字了，因为css是全局生效的，那css的class名字就相当于手动去维护一个全局的变量，并且不能受其它变量修改的影响，另外还要考虑到和其它的class交叉引用，不出错才怪。时不时的我就会发现我修改的css导致了另外一个页面的某个样式的错乱，然后只能通过更具体的selector去指定样式：
.btn-group > span:first-child:not(:last-child) > .btn {
border-radius: 0;
}
时不时很魔幻？这样的代码随处可见，只要你用这种方式组织css代码。
BEM：The savior？No！
BEM（Blocks, Elements and Modifiers）试着用模块化的方式将class名字组织起来，正如它的名字BEM，它将一个class的命名分为三个层次：Blocks, Elements and Modifiers。
图中logo，input和menu等绿色的部分是block，menu elements是element，红色部分是modifier。希望了解更多可以点击 http://getbem.com/introduction/ 。
通过BEM的方式写出来的代码是这样的：
<button class="button">
Normal button
</button>
<button class="button button--state-success">
Success button
</button>
<button class="button button--state-danger">
Danger button
</button>
BEM解决了css之间互相影响的问题，不过还是有些问题。
问题一，虽然分层的思想让代码的组织方式简单了一些，但仍然要去想不同的class名字，而且最重要的是，只要class不小心起了一样的名字，那还是会互相影响，除非你的class非常具体，而这样的话就又似乎回到了常规css的写法，what the heck？
问题二，代码显得非常臃肿，因为你的class名字很长长长长长长长长长。
问题三，扩展css并非易事，复用模块化的css仍然需要制定很具体的selector。
Styled Components如何拯救css世界？
如果你了解React的jsx，你肯定就知道了html in js这个概念，简单来说就是在js中写html，它让开发者更容易的写出灵活的UI。Styled Components是css in js，就是在js中写css，通过这种方式可以实现更灵活的css。
使用Styled Components，是一种编程范式的转变，思考方式由我要给一个element什么class名字，变成了我希望当前的这个地方是一个什么角色的element，更关注我真正想要的是什么，看看例子：
import React from "react"
import styled from "styled-components"
const Footer = styled.div`
display: flex;
justify-content: flex-end;
`
<Footer />
// 会被编译成
<div class="sc-kAzzGY fxGvJO"></div>
.fxGvJO {
display: flex;
justify-content: flex-end;
}
从代码中我们看到了，我想要一个Footer，那我就写Footer就好了，然后直接给Footer添加样式：
const Footer = styled.div`
display: flex;
justify-content: flex-end;
`
这种方式解放了大脑，让开发者不需要去想要给class取什么名字了，代码会用hash函数自动生成一个全局唯一的class名字，再也不需要担心class名字冲突了。
这时候你可能有疑问了，如果每个class都唯一，那我如何复用呢？也很简单，上代码：
import styled from 'styled-components'
import { Button } from './Button'
export const Btn = styled(Button)`
border-radius: 0;
`
<Btn>Cancel</Btn>
因为现在的css是js的一部分了，所以需要啥就直接import进来吧，然后用styled 函数包起来styled(Button)，后面就可以写自己的样式了，是不是很方便？
另外，还支持根据传入的props修改样式的操作，让我们实现不同的Button Component非常方便：
import styled from 'styled-components'
import { Button } from './Button'
export const Btn = styled(Button)`
border-radius: 0;
background: ${props => (props.type === 'default' && '#fff')
|| (props.type === 'danger' && '#BE1313')
};
color: ${props => (props.type === 'default' && 'gray')
|| (props.type === 'danger' && '#fff')
};
`
<Btn type="default">Cancel</Btn>
<Btn type="danger">Confirm</Btn>
通过一段css就实现了default和danger两个Button，是不是很强大？
还有，你应该也发现了，代码更简洁更语义化了。
总结
通过最近对于Styled Components的尝试，让我第一次写css有了很爽的感觉。通过对常规css和BEM的对比，也让我们体会到了Styled Components的强大，Styled Components不但会让我们的代码更加简洁和语义化，同时也解决了css class起名难和style互相冲突的问题，另外对于实现Component复用和继承也是非常的方便。
最后要说明的一点是，如果想在自己的项目中尝试Styled Components也非常简单，可以一点点的迁移，迁移过程相对容易，而且修改一个文件对于其他文件的影响也不大。
更详细的信息，可以参考Styled Components的官方网站 https://www.styled-components.com/
