「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」。
CSS Modules vs CSS in JS，应该是前端开发界蛮具争议的一个问题了，在对比两种类型之前我们先来思考下为什么已有原生的CSS还需要两这种类型的库，原因是在工程化的开发中，我们经常需要多人合作，不同的模块。最后把所有的模块都和到一起测试上线。原生CSS是没有命名空间的，经常会出现重复命名导致污染其他模块的现象。所以需要实现CSS样式的局部隔离，就出现了CSS Modules跟CSS in JS，React里面常用的styled-components库就是CSS in JS的实现。
CSS modules是使用独特的class名，通过文件名、路径生产独特的hash前缀来隔离各个模块，这个hash是构建工具比如webpack的css-loader插件去生成，而CSS in JS中的样式是JS 运行时解析，然后挂载到head。
CSS in JS
硬伤
-
样式是和JS文件打包在一起，所以会拖慢JS文件加载时间
-
没有单独CSS文件所以无法缓存
-
大多数的库跟插件样式都不是CSS in JS 开发的，业务开发时代码可CV性差
-
不能使用SCSS, Less等CSS 语言（根据库情况不同，比如styled-components有支持）
优点
-
可以用JS的逻辑，比如函数，比较灵活，复用性强
-
小项目中比较方便
-
语义化更加友好
CSS Modules
缺点
-
全局样式需要用:global 的非原生语法去定义
-
需要引入样式
优点
-
可以用SCSS， Less等CSS语言
-
样式代码与JS代码分离，代码会相对简洁
-
只是在CSS基础上加入了局部作用域跟模块以来，代码相对规范
-
规则简单易学
结论
CSS in JS有自己的特点跟优缺点，值得注意的是他不是纯粹的CSS，所以维护性较差，而且不能缓存且影响JS文件加载速度，对比CSS文件可以和JS文件并行加载，理论性能会差。开发的时候也的lint工具的支持不够完善，容易写出Bug，需要有合适的工具去解决这些问题。同时CSS in JS也因为耦合度高适合作为小型的模块被复用。综上还是建议大型项目选择CSS Modules的方式去处理CSS命名冲突，小型、个人开发或特殊需求可以选择CSS in JS。
