理解CSS Modules

CSS Modules

前言

今天被批了，心情很是郁闷，转念想确实是自己的问题，一天的工作确实没有多少实际产出，老是想着该学的学会了就会好的。公司毕竟不是学校，不会给你太多学习的时间，我们的职责终归是为公司产生效益，基本的任务完成不好，整天想着学习是不切实际的，所以在此谨记，工作是工作，学习是学习，在公司先完成工作，这是个人能力的体现。郁闷归郁闷，博客还是要写的。

传统的CSS弊端

前端一直在说模块化模块化，React的组件不知道是不是遵循了模块化的原则，CSS Modules也是CSS模块化一种方案，结合实际开发，我们往往会碰到下面这些情况：

/* components/submit-button.css */
.Button { /* all styles for Normal */ }
.Button--disabled { /* overrides for Disabled */ }
.Button--error { /* overrides for Error */ }
.Button--in-progress { /* overrides for In Progress */

<button class="Button Button--in-progress">Processing...</button>

上面是css的正常打开方式，我们来分析一下它的弊端：
1.命名混乱：.Button是普通的按钮的样式，其他三个是在此基础上的样式叠加，如果我想要增加一种新的按钮，命名也是像上面一样，等到程序复杂了，或者说多个人一起开发，为了区分，可能类的名字就会很长，首先命名混乱，不易阅读，其次影响项目的压缩。。。
2.依赖管理不好：这个我一直不是理解的很彻底，我现在的想法，以上面威为例，button的组件有一个css，一个页面有多个组件，那么html里面是不是有多个诸如这种<link src=''>的引入语句，就会显得很乱，是不是？
3.全局污染：这个在上面的代码里没法体现，等到项目大了，多人协作后引入好几个css文件，比如别人一个ul的样式可能把你写的东西搞得完全认不出来，到时你就知道模块化有多爽了。
4.无法共享变量：为啥这么说呢？比如有一些样式是很多组件都需要的，如果是普通css，就只能老实地复制粘贴（是不是这样？我css还不是很精通），但是CSS Modules就有一个composes可以得瑟，下面会讲。
所以说传统的css还是会存在很多不好的地方，所以我们就要看看CSS是怎么解决这些问题的。

CSS Modules的解决方案

先看一下同样的例子，CSS Modules的写法：

/* components/submit-button.css */
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */

/* components/submit-button.js */
import styles from './submit-button.css';

buttonElem.outerHTML = `<button class=${styles.normal}>Submit</button>`

乍一看，？，要写的东西变多了。。。，每个组件样式都要全部重新写，都不能覆盖，什么玩意儿？别急，慢慢分析。
首先，命名不会混乱了，因为不需要叠加式的起名字了，引入的css的语句会让最终的html自己加上前缀和后面唯一的序列码，我们只需要简单的命名，绝对不会混!压缩自然也小一些。
每个组件有自己对应的样式，即使import后在同一个js文件中也不会冲突，看上面的<button>，它的class只有submit-button里的样式。
依赖管理方面哈哈，反正就是感觉这样很好管理啊，你自己体会。
最让人诟病的样式重新写，其实人家早就想好了，就是composes。

<button class="components_submit_button__normal__abc5436">
  Processing...
</button>

composes

.common {
  /* all the common styles you want */
}
.normal {
  composes: common;
  /* anything that only applies to Normal */
}
.disabled {
  composes: common;
  /* anything that only applies to Disabled */
}
.error {
  composes: common;
  /* anything that only applies to Error */
}
.inProgress {
  composes: common;
  /* anything that only applies to In Progress */
}

具体就是这么用的，应该很容易就能发现用法。当然在SASS里面我们可以用@extend实现相同的效果。
其他css文件中的样式也可以拿来复用：

/* colors.css */
.primary {
  color: #720;
}
.secondary {
  color: #777;
}

/* other helper classes... */

/* submit-button.css */
.common { /* font-sizes, padding, border-radius */ }
.normal {
  composes: common;
  composes: primary from "../shared/colors.css";
}

其实本文也只是在CSS Modules是什么，有什么用上做了一些学习，具体如何才能使用，要注意一些什么规范，在实际工程中的应用这些都没有细讲。CSS Modules结合React，Webpack灵活运用，这是一段很长的路，不是靠这一点理解就行，希望以后有机会还能写一篇关于CSS Modules方面更深的探讨，共勉！
本篇文章实例摘自CSS Modules