【前端】保证css样式不被污染

前言

  在前端开发中，如何保证一个页面的样式不污染其他页面的样式呢？以Vue举例，我们会用到scoped属性。

什么是scoped

  在Vue的style中，有一个scoped属性，表明它的css样式只作用于当前的页面，如果每一个页面的style都加上了scoped，那就相当于实现了样式的私有模块化。

使用背景

  在大米订餐的开发中，我们使用了Vue的前端框架，引用了iview的第三方组件，有大部分的界面都使用到了iview的表格，但是有一个刷卡取餐的界面要求字体加粗变大，其他界面字体保持不变。

使用scoped

  此时我们给每个页面的style标签都加上了scoped，确实可以实现表格字体放大的功能，但是会存在一个问题：假设我设置了A界面的表格字体为50px，进入A界面，字体大小为50px，但是我点进去B界面，此时B界面的字体大小也是50px，经过F5刷新之后字体才会回归正常大小。

穿透scoped

<style scoped>
    外层 >>> 第三方组件 {
        样式
    }
</style>

  这样可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。

总结

  我们使用的scoped属性，它的存在可以让我们的组件的样式保持独立性，但同时使用scoped也存在一个问题，就是我们不应该在项目中定义重复的样式规则名称。

参考博客

https://www.cnblogs.com/karthuslorin/p/9038854.html