Vue: scoped 样式与 CSS Module 对比

每个通过 vue-cli 创建的 Vue.js 应用都内置了两个很好的解决方案：Scoped CSS 和 CSS Modules (模块式 CSS)。两种方案各有优缺点，我们来看下哪种方案在你的案例中更适用。

• Scoped 样式
  我们只需要在 style 标签上添加一个 scoped 属性即可启用 scoped 样式：
  
  这样就会使得我们的样式只被应用到这个组件中的元素上。这是借助 PostCSS 实现的，它会将上面的代码转换成下面这样：
  
  现在假设你需要调整一个视图中的某个组件的宽度，那么你可以像你平时那样做的一样：在这个组件上添加一个额外的 class 来设置其样式。
  
  经转换后：
  
  不过请注意：这个特性存在一个缺陷，即如果你子组件的根元素上有一个类已经在这个父组件中定义过了，那么这个父组件的样式就会泄露到子组件中。
  还有一些情况是我们需要对我们的子组件的深层结构设置样式——虽然这种做法并不受推荐且应该避免。为了简便起见，我们假设我们的父组件现在要对 BasePanel 的标题设置样式，在 scoped 样式中，这种情况可以使用 >>> 连接符（Vue高版本特性，在stylus中可用）（或者 /deep/（在Sass中）|| @{deep}（在less中） ）实现。
  
  经转换后：
  
  非常简单，是吧？可是别忘记，我们却因此失去了组件的封装效果。这个组件内的所有的 .title 类的样式都会被这些样式所浸染——即便是孙节点。

• 模块式 CSS
  
  这次我们使用的不是 scoped 属性，而是 module。这等于告诉 vue-template-compiler 和 vue-cli 的 webpack 配置要对这一部分采用哪些相应的 loader，进而生成像下面这样的 CSS：
  
  它的特殊之处以及和 scoped 样式不一样的地方就在于所有创建的类可以通过这个组件的 $style 对象获取。因此，要将这个类进行应用，我们需要像下面这样进行 class 绑定：
  
  这段代码将生成下面的 HTML 及相关的样式：
  
  它的第一点好处就是，当我们在 HMTL 中查看这个元素时我们可以立刻知道它所属的是哪个组件；第二点好处是，一切都变成显式的了，我们拥有了彻底的控制权——不会再有什么奇怪的现象了。和 scoped 样式那种把普通的标签也加上那些 data 属性的做法不一样，这些普通标签在转换后还是最初的样子。
  比较 scoped 样式中的第二个例子，我们来看下我们可以怎么对那个组件设置样式：
  
  其转换后：
  
  毫无意外，跟我们期望的结果一样。此外，因为所有的 CSS 类可以通过 $style 对象获取到，所以我们可以通过 props 将这些类传递到任何我们希望的深度中，这样，在子组件中的任意位置使用这些类就会变得极其容易：
  
  模块式 CSS 与 JS 有着很好的互操作性 (interoperability)，这一点不只局限于 CSS 类。我们还可以使用 :export 关键字将其他的东西导出到 $style 对象上。
  例如，想象一下你有一个图表需要开发 —— 你可以在 CSS 中定义你的色彩变量的同时将其导出，以供你的组件使用：
  
  总结

• scoped 样式的使用不需要额外的知识，给人舒适的感觉。它所存在的局限，也正是它的使用简单的原因。它可以用于支持小型到中型的应用。

• 在更大的应用或更复杂的场景中，这个时候，对于 CSS 的运用，我们就会希望它更加显式，拥有更多的控制权。虽然在模板中大量使用 $style 看起来并不那么“性感”，但却更加安全和灵活，为此我们只需付出微小的代价。还有一个好处就是我们可以用 JS 获取到我们定义的一些变量（如色彩值、样式断点），这样我们就无需手动保持其在多个文件中同步。

（附原文链接：Vue: scoped 样式与 CSS Module 对比）