Web标准：改变您的网页制作思维方式节省代码及结构与表现分离_Web标准教程

　　“重构”的春风吹遍大江南北，互联网一时间风声鹤唳，“div CSS”俨然已成为一种“时尚”，难以尽数的网站都不约而同地开始了自己的“重构”。然而打开这形形色色网站的源代码，却时常令人哑然失笑——

　　我们看到有嵌套6、7层的div布局，有不用table的表格，有纯div a构成的页面，有成百上千的表现层class……现在关于标准的书籍越来越多，除了少数几本标榜“高级技巧”的书籍以外，很少有人不会在自己著作的前几章强调这样一句话——“结构与表现分离”。然而这些书籍的读者们，又有多少人认认真真地读过前几章呢？还是更多地直接跳过那些乏味的结构讲解，一头扎到貌似高深的布局技巧与Hack中去？

　　其实div CSS这个说法从一开始就误导了太多的人，急功近利的心态则更是造成这种现象的罪魁祸首。一个习惯了table布局的网页制作接触标准的第一步，不应该是去盲目寻求实现各种布局的CSS技巧，而是努力改变自己的思维方式。

　　“节省代码”是营销手段，不是宗旨！　“使用div布局可以比table布局节省更多的代码”，我在很多书籍和网站上见到过这句话。这句话本身是没错的，可以“节省代码”的确是网页标准化所带来的好处之一。然而切记，它只是“好处之一”，而不是“唯一好处”，更不是宗旨。“节省代码”更多的时候是我们用来说服那些顽固不化的老板的营销手段。网页标准化的唯一宗旨是“结构与表现分离”，而绝不是为了节省代码而节省代码。我曾经因为网站边栏甚至主体内容的表现形式相同而采用了统一的class （至今还有一些书是这样教的），这样的确比分别命名id更节省代码，然而这样做的代价是代码失去了良好的结构。失去良好结构的后果是：一、源代码没有了可读性；二、网站增加了未知的维护成本。试想，当某一块内容因为需要而作出表现形式的变动，例如链接的颜色等等，我们就不得不去修改页面源文件，增加额外的class，工作量比起只需要调整id分组就大了许多。而且长此以往，结构将会越来越差，形成难以逆转的恶性循环。

　　还有一种情况，出现在id的命名方面，也是本人曾经犯过的错误。那时为了“节省代码”，而把主菜单命名为“mm”，二级菜单命名为“m2”，三级菜单为“m3”，结果严重降低了网页的可读性，使其他同事很难接手，图省事却累了自己。同理，文件及文件夹命名方面也不宜过简，象《网站重构》里建议把图片都用“i”目录存放，个人以为并不可取，除非你能为这种高度缩写的目录结构撰写具体说明并保证每个相关人员包括其他制作人员、开发、甚至懂行的老板……都能理解和执行，否则只会给你自己增添不必要的麻烦。

　　“结构与表现分离”　关于这一点，网络上很多高手都是这样建议的，也就是先打开编辑器，把结构完整地写出来，再去CSS里写表现，而尽量不去动已经写好的结构。

　　然而以看书为主要学习方式的人却很难体会，因为关于标准的书籍多半是手把手来教的，也就是必然是结构表现结合，循序渐进。虽然有些书籍有这方面的建议，但短短的几句话远不如读书过程中的潜移默化。在制作人员能够对结构良好把握的时候，同时写结构与表现也不会对结果有太大的影响。但以我的经验，结构表现分离的工作方式，要比同时写结构与表现效率高很多，同时也不轻易遗漏页面上的元素。

　　当然，所谓的“结构与表现分离”并不是完全不考虑表现，想要兼顾到表现，就要保证——在不破坏结构的前提下，CSS选择器能够选择到尽量多的内容。在哪些地方加class，或者用哪些标签来区分，是一个见仁见智的地方，相信每个人都有自己的体会。而结合不同的设计稿，有时候也需要做出相应的变化，然而这些变化都应该有一个同样的前提——不破坏代码的结构和可读性。

　　再就是，一定要意识到，任何可视化的工具都是魔鬼。它们可视化界面下所呈现的效果，往往与真实浏览器相差千里，而我们真正要兼容的是浏览器，不是编辑器的可视化界面。