13518219792
我们使用scoped实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块.但我们难免会用到一些框架如element vant等,我们想要修改其中样式时,如果使用了scoped,则需要深度选择器来进行样式的更改.
凤庆网站建设公司成都创新互联公司,凤庆网站设计制作，有大型网站制作公司丰富经验。已为凤庆千余家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的凤庆做网站的公司定做！
使用场景:
当我们需要覆盖element-ui中的样式时只能通过深度作用选择器
style为css时的写法如下
有些像 Sass 之类的预处理器无法正确解析 。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 的别名，同样可以正常工作。
style使用css的预处理器(less, sass, scss)的写法如下
第一种/deep/
第二种::v-deep
建议使用第二种方式,/deep/在某些时候会报错,::v-deep更保险并且编译速度更快.
1、
语义化。
2、
class 跟 id 最大的不同就是一个元素可以有多个 class，但只能有一个 id。所以 class 应该是分散的、抽象的。比如要定义“红色按钮”和“蓝色复选框”，应该定义成“.red.button”、“.blue.checkbox”，而非“.red-button”、“.blue-checkbox”。这样一来不利于日后扩展（蓝色按钮和红色复选框）；二来这相当于为每个元素单独定义了class，class 未复用。
3、
利用好 CSS 的后代选择器、兄弟选择器等等，即使同为一个 .header，在 .nav 和 .cell 下也会是不同的（当然如果你非要定义成 .nav-header 和 .cell-header 也不是不可以）
4、
如果引入了第三方样式库，为了避免和它的命名冲突，通常做法是在你自己的CSS前加前缀，比如为每一个 class 加前缀“ui-”之类的。
5、
如果引入了两个第三方样式库本身就冲突，那……
6、
多看看主流的开源样式库是如何定义的，比如 Bootstrap、jQuery UI、WeUI 等等等等，不一一列举了。但要记得“尽信书不如无书”，这些框架未必做的就是百分百对的，其实存在很多设计不合理的地方，原因是在最开始未规划好给后来挖了坑，后来发现时想改已经来不及了（因为毕竟得尽可能兼容之前的版本，大多数时加法好做减法不好做）。
1、样式文件必须以[name].module.css或[name].module.scss的形式命名
2、以变量的形式导入样式文件，比如 import styles from './style.module.css';
3、className以变量引用的方式添加，比如 className={ styles.title }
前两天在项目中遇到一个问题，需要手动去修改引入的第三方组件的CSS样式，我第一想法就是直接在组件上新增一个自定义的class去覆盖原有的样式，结果当然是行不通的（不然我现在也不会在这里写这篇）。
于是我查了一下，是因为我在vue组件里面将设置成了局部样式，局部样式只在当前组件生效，对引入的其他组件是无法起作用的。然后我试了一下，把 scoped 去掉就行了。
或者在组件里面写多一份全局样式
但是如果不在style里面写 scoped ，直接写成全局样式，最后可能会面临多个组件之间样式污染的问题。如何使得局部样式可以覆盖到引入的第三方组件呢，我想到以前涉及过的一个名词 样式穿透 ，立刻实践了一下，果然就成了。
样式穿透 需要定义一个外层的style，通过 可以使得socped属性下的的样式穿透到全局， 外层 第三方组件 或者 外层 /deep/ 第三方组件 。 是 /deep/ 的别名，但是在sass之类的样式预处理器之中无法正确解析。
