简单明了带你了解CSS Modules

结果是选手2获胜，class名为title的元素，最终的color值为gold。css里就像这样，随时可能一言不和就发生战争，结果输掉的一方就会被胜利的一方所覆盖。无论分拆为多少个css文件，无论用怎样的方式引入，所有的样式规则都位于同一作用域，只要选择符近似，就有发生覆盖的可能。而合理的命名约定，的确是组织css代码的有效策略。首先，css保持不变。在项目里应用CSS Modules有很多方法，目前比较常用的是使用webpack的css-loader。为css-loader增加localIdentName参数，是可以指定生成的名字。如果是线上环境，可以考虑用更短的名字进一步减小css文件大小。我们已经说了挺多普通css单个全局作用域的坏处。因此，CSS Modules建议只使用1个class就定义好对应元素所需的全部样式。它们会再由CSS Modules转换为适当的class组合。