最牛逼的 HTML 和 CSS 代码

在前端开发领域，最难的其实是HTML，其次是CSS，最后才是JS。当然这句话是不正确的，然而我们真需要老说那么正确的话吗？正确的话很多时候还不如不正确的话那么对人有用。比对错更重要的是对场景、环境的理解、把控。

“最牛逼”只是修饰语，表示强调，就如我说“最难”的是HTML一样。看到这种微博时，别急着去反驳有更牛逼的HTML，或去思考JS比HTML难呀。

HTML

<div class="box">
  <div class="hd"></div>
  <div class="bd"></div>
</div>

• 为何只有 hd 和 bd？ft 呢？
• 为何用 div 而不是 section / header 等？
• 为何 hd 里的标签没做约定？
• 这段代码，是为了满足什么需求？
• 对于复杂需求，这个代码如何变化？
• 简单和复杂之间如何权衡？（很多程序员倾向于把事情搞复杂）
• 为何不是 mod / mod-hd / mod-bd ？
• 在什么场景下这段代码不适用？（比如组合命名和长命名之争）
• 这东西跟性能没关系。
• 这东西跟可维护性关系很大。
• 究竟什么是结构与样式的分离？
• 衡量一个好的HTML代码的标准是什么？
• 结构化设计是什么？
• 部分如何构建出整体？砖瓦是怎么变成大厦的？
• 关注度分离是个啥东西？
• 什么是抽象？抽象的价值究竟是啥？
• 什么是创新？什么是超越？

CSS

.content {
  width: 980px;
  margin-left: auto;
  margin-right auto;
}

//但大多数情况下，我们会这样写
.content {
  width: 980px;
  margin: 0 auto;
}

上面的代码看上去更多了，但有没有想过这样的问题呢：

• margin: 0 auto 中的 0 绝大部分情况下是冗余的，页面上早就有 reset.css 或 normalize.css 重置过
• margin: 0 auto 不纯粹，你要的是“水平居中”，却顺便把 top / bottom 给重置了
• 不纯粹会导致顺序和优先级的依赖，比如有另一处要给 margin-top/bottom 赋值时，就必须要提高优先级
• CSS中一个最重要的原则：最小影响原则
• 与HTML代码一样，对CSS代码来说，很重要的两个衡量标准也是稳定和灵活。

JavaScript

<a href="javascript:alert('清除成功')">清除缓存</a>

这是我见过最牛逼的JS代码，没有之一。对JS代码，我认为有3个段位：

• 实现业务需求
• 实现业务需求+代码健壮
• 实现代码需求+代码健壮+可复用

参见 玉伯