css作用域

css作用域

概述：
最近在项目中遇到很多样式冲突的问题，发现是由于在css中使用很多deep和css的作用域问题导致的，所以写个文章记录样式冲突问题解决方案

---

---

前言

提示：这里可以添加本文要记录的大概内容：

Scoped CSS与CSS Module是两大解决CSS中不存在模块化缺陷的有效手段

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、CSS Module

简介：

CSS Module通过将class名称做编码转换的方式来保证唯一性，从而避免样式冲突（其根本就是为了保证不会发生同名即使同名也不会造成冲突）

示例：

html

转换前

<h1 className={style.title}>
     Hello World
 </h1>

转换后

 <h1 class="_3zyde4l1yATCOkgn-DBWEL">
     Hello World
 </h1>

css

转换前

.title {
   color: red;
 }

转换后

 ._3zyde4l1yATCOkgn-DBWEL {
   color: red;
 }

二、Scoped CSS

简介

使用的是另一种解决方案 —— 在HTML标签上做文章
直接上代码

<style scoped>
 .example {
   color: red;
 }
 </style>
 ​
 <template>
   <div class="example">hi</div>
 </template>

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了css作用域，若需要深入修改样式可以使用deep但是也需要css作用域以防发生样式冲突