CSS常见的模块化方案

• BEM方案：BEM全称是Block Element Modifier，通过.block__element--modifier即.模块名__元素名--修饰符名这种CSS命名方式实现样式隔离和模块化；
• CSS Modules：将CSS文件进行编译后，使之具备模块化的能力
• CSS-IN-JS：使用 js 来编写CSS规则

vue中的设置样式的方法是通过单文件组件中的style标签来实现的，只需要在style标签上加一个scoped标签就可以轻松实现。

scoped的使用

 <style scoped>
   .container {
       background: red;
   }
 </style>

在style标签上增加scoped属性后，最终编译出来的结果会在选择器上增加一个唯一的attribute（比如data-v-mlxsojjm），每个.vue文件编译出来的attribute都不一样，从而实现了样式隔离。

 <style scoped>
   .container[data-v-mlxsojjm] {
       background: red;
   }
 </style>