- 全局污染 – CSS的选择器是全局生效的，所以在class名称比较简单时，容易引起全局选择器冲突，导致样式互相影响。
- 命名混乱 – 因为怕全局污染，所以日常起class名称时会尽量加长，这样不容易重复，但当项目由多人维护时，很容易导致命名风格不统一。
- 样式重用困难 – 有时虽然知道项目上已有一些相似的样式，但因为怕互相影响，不敢重用。
- 代码冗余 – 由于样式重用的困难性等问题，导致代码冗余。
在CSS的进化历史上，出现过各种各样的框架致力于解决以上的问题：
- SASS, LESS – 提供了变量、简单函数、运算、继承等，扩展性、重用性都有了很大的提升，解决了一些样式重用冗余的问题，但是对于命名混乱问题的效果不大。
- BEM (.block__element–modifier) – 比较流行的class命名规则，部分解决了命名混乱和全局污染的问题，但class定义起来还是不太方便，比较冗长，而且和第三方库的命名还是有可能冲突。
- CSS Modules – 模块化CSS，将CSS文件以模块的形式引入到JavaScript里，基本上解决了全局污染、命名混乱、样式重用和冗余的问题，但CSS有嵌套结构的限制（只能一层），也无法方便的在CSS和JavaScript之间共享变量。（compose: classname 可以在里嵌套一层）
css Moduel例子了解
[cc ]
****/components
*********/Button
*************Button.js
*************styles.css
// styles.css
.red {
font-size: 25px;
background-color: red;
color: white;
}
// Button.js file
import React from ‘react’
import btn from ‘./styles.css’
export default class CoolButton extends React.Component {
render() {
return (
)
}
}
[/cc]
流行框架介绍
现在随着组件化概念的流行，对从组件层面维护CSS样式的需求日益增大，CSS-in-JS就是在组件内部使用JavaScript对CSS进行了抽象，可以对其声明和加以维护。这样不仅降低了编写CSS样式带来的风险，也让开发变得更加轻松。它和CSS Modules的区别是不再需要CSS样式文件。
先来看看下载量最高的styled-component的代码风格：
