reactJS学习笔记（2）--css

css的设计缺陷

1. 无法找到引用关系。这本来不是问题，浏览器通过页面隔离了代码，而一个页面能有多少css呢？但是一旦你想开发一个复杂的webApp的时候，css代码就像全局变量一样影响整个项目，更恐怖的是，你无法准确地找到谁在用它。所以如果不想让你的项目失控，请第一开始就放弃传统的css。
2. 没有继承和变量
3. 缺少包管理
4. 支持嵌套逻辑。 如此复杂的样式逻辑，我该怎么快速定位呢

   .someClass .child a{
   	color:red;
   }
   

5. 其他编程语言应有的能力的缺失。css是表达语言，而非编程语言，优点是非常明了简洁，缺点是缺失逻辑。这个缺陷并不突出，毕竟样式里哪有那么多逻辑，js+css的操作才是正道。

需求误区

一键换肤这种需求想起来很好，实际做起来就是在自找麻烦。增加了开发的复杂度，又破坏了产品的整体性。

如果真的想让页面多一些配置，可以基于组件的配置，比如输入框，下拉框，文章内容等具体组件设置样式变量，增加small，default，large，highlight模式。highlight模式其实并不多见，需要支持色弱人群的产品得是什么级别的产品呢？

解决方案

1. 全局css应当是只读。比如引入ant.desgin样式后，就不要改动。
2. css module。reactJS的开发环境可以很好地支持css module
3. 在单个模块中使用bem命名。不要使用嵌套css
4. 建立一套统一的命名规则，用一个sqlite存储这中英名关系。这个很重要，但是很难做，毕竟上面的三条可以通过技术就能实现。