在样式开发过程中，有两个问题比较突出：

    • 全局污染 —— CSS 文件中的选择器是全局生效的，不同文件中的同名选择器，根据 build 后生成文件中的先后顺序，后面的样式会将前面的覆盖；
    • 选择器复杂 —— 为了避免上面的问题，我们在编写样式的时候不得不小心翼翼，类名里会带上限制范围的标识，变得越来越长，多人开发时还很容易导致命名风格混乱，一个元素上使用的选择器个数也可能越来越多。

    为了解决上述问题，我们的脚手架默认使用 CSS Modules 模块化方案，先来看下在这种模式下怎么写样式。

    1. // example.vue
    2. <template>
    3.   <div></div>
    4. </template>
    5. <script>
    6. export default {
    7.   data () {
    8.     return {}
    9.   }
    10. }
    11. </script>
    12. <style lang="less" scoped>
    13.   import styles from './example.less';
    14. </style>
    /*  example.less */
.title {
  margin-bottom: 16px;
  font-weight: 600;
}

    在上面的样式文件中，.title 只会在本文件生效，你可以在其他任意文件中使用同名选择器，也不会对这里造成影响。

    CSS Modules 的基本原理很简单，就是对每个类名按照一定规则进行转换，保证它的唯一性。如果在浏览器里查看这个示例的 dom 结构，你会发现实际渲染出来是这样的：

    <div class="title___3TqAx">title</div>

    类名被自动添加了一个 hash 值，这保证了它的唯一性。

    除了上面的基础知识，还有一些关键点需要注意：

    • CSS Modules 只会对 className 以及 id 进行转换，其他的比如属性选择器，标签选择器都不进行处理，推荐尽量使用 className。
    • 由于不用担心类名重复，你的 className 可以在基本语意化的前提下尽量简单一点儿。

    上面只对 CSS Modules 进行了最基础的介绍，有兴趣可以参考其他文档：