CSS模块化遇到的问题-（学习自《深入React技术栈》）

CSS 模块化过程中遇到的问题

一、全局污染

在写组件过程中，引入的 css 是全局的，如果不同组件中存在相同的 class 或 id 值，样式会被后写的样式覆盖，导致样式错乱。这时候就出现了丑陋的 !important 、 inline !important 和复杂的选择器权重计数表（标签名权重1，class名权重10，id名权重100等），使得代码的犯错概率和使用成本提升。Web Comonent 标准中的 Shadow DOM 能解决这个问题，但由于他彻底局部化，外部不能修改样式。（写组件的时候，给组件命名一个独有的类名，这个组件独有的css样式，都写在这个独有的类名内部。将各组件相同的 css 样式抽离出来，避免重复写相同样式，导致代码增加）

二、代码压缩不能达到极致

由于移动端的不确定性，代码需要达到极致的压缩，才能带来快速的加载。例如，将 css 中将 16px 压缩成 1pc ，只是为了压缩一个字节，但是却无法对一些很长的类名进行压缩。（尽量写精简的类名，以前类名为了表达意思会写得较长，为了页面的性能优化，尽量精简类名。）

三、命名混乱

写项目的过程中，多人协作开发为了避免样式冲突，选择器越来越复杂，容易产生不同的命名风格，样式多了之后，命名更加混乱。（在多人开发前，应该出一个命名规范，例如规定好每个组件的独有类名，将局部样式写入组件的独有类名中、根据使用类型设定不同的特定前缀、命名的连接方式使用 ‘_’ 或是 ‘-’ 等）

四、依赖管理不彻底

构建组件仅需引入组件所需的css，现在不仅要引入 JavaScript 还要引入它的 css 。现有的 scss、less 等预编译语言无法做到单独编译出该组件独有的css。如果引入 所有模块的 css 则会造成浪费。

五、无法共享变量

复杂的组件通常由JavaScript 和 css 共同控制样式，使得部分变量在 JavaScript 和 css 中冗余。现有的预编译语言无法提供让 JavaScript 和 css 共享变量的能力。