样式隔离

由于CSS选择器的作用域是全局的，所以很容易引起选择器冲突。为了保证您编写的自定义可视化组件的样式不影响Quick BI其他的页面，您可以通过以下方式实现样式隔离。

Shadow DOM （推荐）

Shadow DOM 可以将标签，样式和行为隐藏起来，并与页面上的其他代码相隔离，保证不同的部分不会混在一起。在Quick BI中，自定义可视化组件默认都是渲染在Shadow DOM节点之内，如果不需要开启Shadow DOM，可以在自定义可视化管理平台中手动关闭。

CSS Modules

CSS Modules 指的是我们像JS模块一样去引入我们的CSS代码，代码中的每一个类名都是引入对象的一个属性，编译时会将CSS类名加上唯一hash值。

如果你的自定义可视化组件需要支持低版本浏览器，推荐使用CSS Modules隔离样式。在种子工程中已经内置支持了CSS Modules，只要是以 .module.css或 .module.css结尾的文件都可以直接import使用。

// index.module.css
.test-class {
  color: #ddd;
}

// 编译后的 index.module.css
._2GdXV4wBykbQ3MN-f1VJv7 {
  color: #ddd;
}

import styles from './index.css';

// 使用类
document.getElementById('foo').classList.add(styles['test-class'])

BEM 规范

如果您不想使用 CSS Modules，则需要自己保证样式类名的唯一性。

CSS实际上是没有真正意义上的命名空间的。为了模拟命名空间，推荐使用 CSS BEM 规范。

// good, 所有样式都写在 .my-component 父类内.
.my-component {
  color: #ddd;

    ul {
      color: #aaa
  }

    &__header {}

  &__header--title {}
}

// bad, 样式尽量不要定义在父类之外
ul {
  background: #aaa
}