为什么 className 不要以 ad 开头？

A 公司新来的实习生小谷，发现页面里面一个 div 死活都显示不了。

页面的内容是 <div id="ad_holder">你好</div>，然后用 Chrome 打开，怎么也显示不出来：

再经历了几轮排查后，小谷发现，关掉 Adblock Plus 插件后，元素就奇迹般的重现了！如下图：

这是为什么呢？

 

其实是因为 Adblock、Adblock Plus 等浏览器插件会自动屏蔽一些以 ad 开头的标签和文件。你可以简单理解为这些插件在页面中插入了如下的代码：

<style>
#ad_holder{
  display: none !important;
}
</style>

所以，小谷将 ad_holder 改名为 art_holder 之后，问题就解决啦。

总结

这个知识点其实只要知道有这么一回事就可以了，然而我要说的其实是一个前端开发者的「观察能力」，从细微之处发现规律。

作为一个前端，我时常问自己：

• 我对浏览器了解吗？
• 我对用户使用浏览器的习惯了解吗？

 

前端，不只是 HTML / CSS / JS。前端要对用户交互时的方方面面进行考虑，这也是前端存在的价值所在。

与君共勉。