css 类名不能乱起,避免被浏览器插件屏蔽

项目是基于vue-element-admin,开发过程中遇到了令人自闭的大坑，发现问题的契机为想把重复的几处style写成class。

因为功能模块是广告类型相关，我就取了个“ad-item”的类名，问题出现了，界面上的元素没了，

查看类的属性，宽高字体大小都给了，遂查看项目中的同名样式，发现没有同名样式，这就太离谱了。把class的样式复制给style没毛病，我定位出必然是class冲突了，要么是被ele给覆盖了，要么是在别的地方被覆盖了。

去浏览器的样式表搜了一下ad-item，发现一个很奇怪的样式，成百上千的类名以逗号隔开，最后带着一个

display: none !important;

类名中出现了很多“ad、advert、ads”的关键字我一想啥东西和广告这么大仇，心理咯噔一下，真相只有一个，我的chrome AdBlock插件，停用，刷新，好了出来了。