UI组件库中 CSS 的最佳实践

使用了那么多的前端 UI 组件库，但是从来没有仔细想过他们是如何处理 CSS 的。 其实只要仔细想想就会有很多问题，比如： 如何不去影响使用者的自定义样式？ 如何让使用者可以方便的覆盖组件库样式？
所以我总结了一些 UI 组件库处理 CSS 的最佳实践

1. 组件 CSS 要加独特前缀

比如你写了一个 button 组件，你的 class 叫 .button，这就很容易被使用者覆盖， 就需要添加一个独特前缀，比如：.dz-button。 最好每个 class 都添加一个相同的前缀。

2. 不要在 Vue 组件库中使用 scoped

Vue 的 scoped 会自动帮你实现样式只在局部作用， 原理很简单就是在选择器上添加一个这样的 button[data-v[f9d22610]] 随机数。 这个在平时很好用，但你想给其他人使用组件库的时候， 他肯定会想要覆盖一些样式，这种时候你的选择器就得稳定不变。 所以，为了方便使用者覆盖 class 选择器，我们还是不要在 Vue 组件库中使用 scoped。

3. 自己的 CSS 不要影响使用者

你在写 UI 库的时候会做一些全局样式设置，比如：

1
2
3
4
5
6
7
8

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-size: 16px;
}

你不能假设用户都跟你有一样的全局样式设置，所以你可以让用户引入一个基础样式表， 同时这个基础样式表不能影响用户，比如这样：

1
2
3
4
5
6

[class^="dz-"], [class*=" dz-"]* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

这个选择器的意思就是选中所有以 dz-，或者包含 dz- 的 class。