最近莫名其妙地用上了 csslint，她给了我很多错误和警告，出于好奇想知道什么原因，所以也从中了解到一些 css “哲学”。
为什么 0 后面不要带单位？
比如这种代码就是不允许的。
.mybox {
margin: 0px;
}
.mybox {
width: 0%;
}
原因是什么呢？
- 出于性能考虑。
- 属性值为0，在任何浏览器下不带单位都是可以正常工作的。
- 节省字节
为什么有时一个属性要写两次？
css3 有很多新属性和新属性的值，所以为了兼顾老旧的浏览器，一般会写上一些 fallback 属性，这样就造成了一个属性值需要写两次的情况。比如：
.mybox {
color: red;
color: rgba(255, 0, 0, 0.5);
}
为什么有人会按字母顺序写 css ？
哈哈，估计这像是 js 的写不写逗号之争。以前我发现 wordpress 官方主题的 css 是这样组织的，看起来形象良好，也不知道是全手写呢？还是通过什么自动化工具弄的。比如下面这段：
.entry-footer .edit-link a.post-edit-link {
background-color: #222;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: none;
box-shadow: none;
color: #fff;
display: inline-block;
font-size: 14px;
font-size: 0.875rem;
font-weight: 800;
margin-top: 2em;
padding: 0.7em 2em;
-webkit-transition: background-color 0.2s ease-in-out;
transition: background-color 0.2s ease-in-out;
white-space: nowrap;
}
我特意去查了一下为什么，网上较真的人还是挺多的。比如 codepen 的创始人做了一个统计，有近万人的投出自己的选票，其中有百分十四的选择了按字母顺序写 CSS ，人还真不少啊。我想这就是一种强迫症和情怀吧。
投票结果：
Grouped by type (45%) was fairly closely followed up by Randomly (39%). Much less popular was Alphabetic (14%) and only a few folks using Line length (2%).
From codepen
为什么不要将样式写在 h1、h2 这些 heading标 签上？
.foo h1 {
font-size: 110%;
}
比如上面这种写法就不太合理。为什么？
- heading 标签样式应该是全局定义的，而不是局部定义的。
- 统一全站文本字号的等级，有利于以后的维护。
- 有利于 SEO。
- 提高 heading 标签的代码重用性。
为什么不要将样式绑定在 html 标签上？
div.mybox {
color: red;
}
.mybox li.active {
background: red;
}
例如上面的代码就不是最优的，可以改为下面这种：
div.mybox {
color: red;
}
.mybox .active {
background: red;
}
原因是什么呢？
- 哈哈，第一点还是减少字节。
- 降低 css 和 html 的耦合，万一哪天不用这个标签呢。
- 可以随意改变 HTML 结构和不用修改 CSS 样式。
持续更新中
参考链接
