今天遇到了一个比较坑的问题，使用Ace Editor却发现代码显示区与编辑器错位，表现是这样的，编辑器中一行代码结束了，但是移动光标却发现后面还有空白位，一开始我以为是空格之类的东西，于是删除最后一个空白位，然后最后一个字符就消失了，继续删字符继续消失，很明显是编辑区与显示区错位。

于是我怀疑是前面的css代码对此处的样式产生了影响，scss已经写了不少了，想直接查找是什么地方产生的影响是比较麻烦的，代码删减法，最后发现是全局样式文件中的一段代码导致的

*{
	font-family: $main-font-family;
	margin: 0;
	padding: 0;
}

其实之前对编辑器区域的审查元素发现编辑器几乎完全是由div元素构成，*表示匹配所有的元素，自然也包括了div元素，早就记不清是从哪儿学的这种写法，事实上这样写的目的是清除所有元素的默认margin和padding，开始的时候是觉得这么写也是无可厚非的，简洁有力，可是没想到有一些插件居然是基于浏览器默认的元素margin和padding来设计布局的，我在一开始的时候就将所有元素的margin及padding清零自然会影响到这些插件的样式。其实在用Ace Editor之前我用的是CodeMirror编辑器，但是CodeMirror却不受影响，估计是它指定了自己的margin和padding值，不受默认值影响。

现在越来越觉得使用*选择器是一件不靠谱的事情，*（通配符）的通用性太大了，匹配所有，是所有的元素。因此*使用的位置越靠顶层对全局的影响越是大，导致后期的故障或者冲突的可能性越大，尽管使用*选择器可能会节省一些代码，但是与导致的冲突相比是得不偿失的。*不能乱用，用在底层还好

.footer .footer-wraper .right .right-tag, .footer .footer-wraper .right * {
  ...
}

一般不要随意使用*，如果要使用*，建议在*下面不要再存在子元素，后或者下面的子元素不是很深并且样式在自己的控制之内。