By Conmajia
March 9, 2018

世纪之初，BKY那些花里胡哨的预设皮肤曾经让初识网络的懵懂学子雀跃不已. 然而以现在的审美眼光看来，这些带着一股子扑面而来的浓厚乡土气息的丑陋界面，根本就是网络泡沫时代留下的泛着油光的渣滓. 当你深入了解隐藏在它们身后的拙劣代码之后，一阵阵波澜起伏的悸动不停在你的胃中翻腾。

所幸BKY留出了几乎不加限制的自定义皮肤接口，使得闲极无聊的博主们能有机会给自己的页面做上一套完整的 facelift. 我也曾尝试过修改博客皮肤，可是这种*式的冲动在我打开网页源代码的几乎同一瞬间即告分崩离析。

凌乱的布局和命名

记得我在初学 HTML 的时候，只会在 Dreamweaver 里用复杂的 <table> 来排列各个页面内容。某天一位号称浸淫网络世界多年的大神看不过去，像兜售黄色影碟的小贩一样把我拉到无人处，用只有我们俩能听到的声音悄悄告诉我有一个叫 division 的好东西可以拿来排版。从此我的网页上开始出现了 <div> 的曼妙身姿。一个、两个、三个，年岁渐长，<div> 也见长，终于我迷失在错综复杂的布局中，完全不记得谁是谁了。从那时起，一种莫名的崇拜之情就深深植根在我心底。在我看来，那些完全使用 <div> 布局的页面，无一不是出自大师之手，直到我在博客的页面上点击了「查看源代码」为止。

它来自某个默认皮肤的源代码，充满了无用嵌套的 <div> 标签，再搭配五花八门的id名字，让我恍惚间以为自己看到的是一名套着 5 层廉价秋衣的淳朴大汉，上面印满了 SPORT 和 FASHION 这样图腾般的英文。无论是 id 和 class 间游刃有余的切换，还是 post_detail 和 postContent 之类风骚的 naming，更甚至是 c_b_p_desc 这样的后现代主义符号具像化，任何一个都能把我可怜的英文思维折磨得体无完肤。于是我只好沿着一个一个的 <div> 摸索过去，试图能在洋洋洒洒的代码汪洋里找到一盏指路的灯塔。可是当我最终整理出了页面的布局之后，现实却结结实实地抽了我一个大嘴巴子。

这美轮美奂的布局，挟带着网易新闻评论区的腥风血雨，终于完全赤裸地呈现在了我眼前。

那层层叠叠的框架像是一圈一圈的年轮般疯狂生长，迅速占满了我那点可怜的脑容量，将我击晕在地。悠悠醒转后，我默默地关上电脑，以近乎修枯禅的虔诚沉思了三天三夜，终于决定先从整理布局开始做起。

整理布局

在这荆棘遍布的 <div> 迷宫中徘徊几天后，我好歹理出了一张脑图来指引继续前行的道路。

我一面抗拒着充满魔性的标签命名，一面标记出那些多余的 <div>。相信我，这绝对是一个痛苦的过程，尤其对我这样可悲的强迫症患者来说，需要在思考的同时，努力压制住挖出BKY这些前端工程师早逝的英语老师鞭尸的强烈想法。

删除多余的层叠 <div>

据科学家统计，网络喷子的记忆只有 7 秒，为了在这短暂的 highlight 里完成验证，我给自己准备了一个简单的例子。