前言
在前端开发过中，编写大量网页样式时，难免会因为不同区域的样式命名导致冲突，所以在开发过程中应该尽量避免定义的样式名相同，通过情况下有如下方案可以解决。
css命名规范
对于不同的页面区块，我们可以以其名称为前缀进行样式的编写，避免可能的冲突，使用最多的BEM规范。
BEM命名规约是：.block-name__element-name--modifier-name，即.模块名__元素名--修饰器名三个部分,通常情况下我们可以在这个规范基础上进行自定义风格，以符合自己习惯的方式书写。
scoped样式隔离
在vue框架中已经帮我们实现了组件之间的样式隔离，只需要在style中添加scoped属性，它会在编译时给组件内所有的HTML标签加上唯一的属性(data-v-hash, 每个路由组件都有唯一的标识), style标签中的css样式添加属性选择器(data-v-hash)，这样就做到了样式的完全隔离。
css模块化
css模块化方案常见的有两种：css module 和 css in js
css module
css module模块化方案允许我们像import一个js Module一样去import一个css Module。每一个css文件都是一个独立的模块，每一个类名都是该模块导出对象的一个属性， 通过这种方式，便可以在使用时明确指定所引用的css样式，并且css Module在编译打包时会将id和class混淆成全局唯一的hash值，从而避免发生样式的命名冲突。
在vue中使用module, 只需在style中添加module属性
<template>
<div>
<div :class="$style.myColor">我是字体颜色</div>
</div>
</template>
<style module>
.myColor {
color: blue;
}
</style>
css in js
css-in-js主要是在react项目中使用，允许你直接使用JavaScript或者typescript修改你的react组件的样式，styled-components和Emotion是React社区中最流行的方案。
优点
- 可以使用js的逻辑，比如变量或函数，比较灵活，复用性强
缺点
- 相比原生的css需要第三方的模块库支持
- 样式是和js文件打包在一起，所以会拖慢js文件的加载时间
- 没有单独的css文件无法缓存
- 不能使用less，scss等css预处理语言
