css中不要在顶层使用*选择器
Tag css, 选择器, on by view 3447

今天遇到了一个比较坑的问题,使用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 * {
  ...
}

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