1.BEM格式
使用过VUE组件库的uu应该都知道，比如在element-ui中对表单组件的命名是<el-from><el-form-item>等，这些命名方式都可以让我们对不同的组件有区分并且加深辨识度
BEM
—Block Element Modifier是一种帮助您在前端开发中创建可重用组件和代码共享的方法，由Yandex团队提出的一种前端CSS` 命名方法论。
B - Block 一个独立的模块，一个本身就有意义的独立实体 比如：header、menu、container
E - Element 元素,块的一部分但是自身没有独立的含义 比如：header title、container input、button
M - Modifier 修饰符，块或者元素的一些状态或者属性标志 比如：small、checked、primary
。block
。block__element
。block--modifier
BEM提出的一个概念是用连接符号来表达,它并不规定必须用什么连接符,但规定用不同连接符做团队内约定区分BEM 3类元素
例如我们组内约定
__ 双下划线代表B和E连接例如 menu __item
_ 单下划线代表B和M或E和M的连接 例如 menu _active 或 menuitem _active
-中划线同英语里做连字符例如 mod-menu 或 mod-menu__item 这里 B或E或M需要多个单词来描述,就使用中划线
BEM 最多只有 B+E+M 三级, 不然class名也会很长，也容易产生同名的问题
2.CSS Scoped
官方文档： 介绍 | Vue Loader (vuejs.org)
Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件
scoped css 会对当前组件(scope)下所有元素生成唯一的属性或类名，对所有 CSS 规则将携带唯一属性实现作用域的命名保护
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
转换结果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
在vue2的组件中，就会经常在一个组件的style中加上scoped 让当前组件的样式仅当前组件适用
3.CSS Modules
官方文档： 介绍 | Vue Loader (vuejs.org)
CSS Modules 是一个流行的，用于模块化和组合 CSS 的系统。
vue-loader提供了与 CSS Modules 的一流集成，可以作为模拟 scoped CSS 的替代方案
使用方法大家就移步官网吧，因为我也没实际用过
CSS Modules | Vue Loader (vuejs.org)
转载：欢迎转载，但未经作者同意，必须保留此段声明；
有问题可以在评论区踢我
