能够玩转BKY皮肤的 geek，有一半最后都成为了前端大师

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> 迷宫中徘徊几天后，我好歹理出了一张脑图来指引继续前行的道路。

▲ mind map才是真正的清真

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

▲ 如果可能，我更希望你他妈能叫它们a、b、c、d

删除多余的层叠 <div>

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

▼ 试验：一个例子

全是他妈的垃圾 删除废物

Node 1 Node 1-1 Node 1-1-1 Node 1-1-1-1 Node 1-1-1-2 Node 1-2 Node 1-3