为啥给组件单独引入css样式文件还是会有样式污染?

219 阅读1分钟

    首先要明确浏览器渲染页面的本质是什么?浏览器渲染页面的本质就是依赖html + css + javaScript,所有的css和js都会在html中引入,所以不管是在组件中引入的,还是在任何地方引入的,最终都会直接从html中通过link接入到页面中。

    有的项目会给css做分片处理,虽然现象略有不同,但是结果是一样的。对于未分片的项目,css在一个文件里,加载页面的时候直接下载这个css文件,所以可以直接看到元素已经被污染了。对于分片的项目,在加载页面时只会先加载需要的几个css文件,但是一旦点进了那个可以污染全局样式的组件中,他的css文件就会被下载下来并link到html中,即使你进去后再退出这个页面也无法删除掉已经引入的css,这个时候全局样式就已经被污染了。

总结:以后给组件写样式的时候,尽量用一个大父类包起来,防止全局污染;在vue中有scope可以帮开发者解决这个问题,在react中需要开发者多注意下这个问题。