Css 被外部组件污染的处理

前情提要

由于 css 样式未统一，所以组件的各个模块的 css 不一致，引入的很多杂七杂八的组件，包括 css，其中一个 css 使用了

* {
    padding: 0;
    margin: 0;
}

影响还是比较大的，导致部分模块的富文本无法正常渲染，被重置为 0 了

解决方案

这里可以采用几种解决方案

css revert

The revert CSS keyword reverts the cascaded value of the property from its current value to the value the property would have had if no changes had been made by the current style origin to the current element.

css revert 可以将 css 重置为未对浏览器未对当前元素进行任何更改时该属性将具有的值

可以将其设置到对应元素属性下面

但其缺点就是很多版本不兼容

不建议使用

使用 normalize.css

Normalize.css 只是一个很小的 css 文件，但它在磨人的 HTML 元素样式上提供了跨浏览器的高度一致性。相比于传统的 CSS reset,Normalize.css 是一种现代的、为 HTML5 准备的优质替代方案。总之，Normalize.css 是一种 CSS reset 的替代方案

项目地址: https://github.com/necolas/normalize.css
CDN 源码: https://classic.yarnpkg.com/en/package/normalize.css

然后再项目中引用它，不过需要注意优先级, 必须大于被污染的优先级代码

 只给对应的组件加载 css

删除组件在 main.js 中的 css 加载，移入到需要使用的组件中

本文由 邓尘锋 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: May 17, 2021 at 10:25 am