vue项目css选型1-原生css的问题

原生css的问题

• 样式的定义顺序影响了最终样式
  • 下例：div 的颜色可能是红色也可能是蓝色，这取决于 css 文件中 class 是如何组织的，class 组织的变动对于使用它的标签是有影响的，但是却是无法感知的

<div class="colorBlue colorRed"></div>

.colorRed {
  color:red;
}
.colorBlue {
  color:blue;
}

• 层叠样式的特点导致渲染结果难以预期
  • 下例：在样式表中得知 classB 能够使字体颜色变为蓝色，但是添加后没有得到预期结果

<div class="classA">
    ...
    <div class="classB"></div>
    ...
</div>

.classA .classB{
  color:red;
}
.classB {
  color:blue;
}

• css 设计的初衷是希望把样式独立出来，使样式具有语义，来保证应用整体效果的统一
  • 这一初衷，需要有统一维护的 class，供给逻辑开发人员去消费，但这和实际开发中的分工不相符
  • 后来出现了 BEM 等规范，但是参与人员良莠不齐，规范难以落地
  • vue 引入了 css module 概念，这一举措虽然降低了管理难度，但需要全局修改样式时又面临规范难以落地的问题