如何更高效的制作可通用的HTML页面

　　这种模型从功能上区分，往往有以下几种：

　　*列表块，列表头为标题块，列表为内容块
　　*正文块，正文标题为标题块，正文为内容块
　　*列表块还可以细分，列表内容中每一个：内容标题为标题块，描述内容为内容块（摘要等）

　　这种模型，可以通过以下的特征来做出区分：

　　*所在的页面，比如用于首页每个栏目的最新内容的列表，还是某个栏目首页的内容列表等
　　*出现在页面的位置，比如Ajax弹出层，DropDown Menu，侧边栏，正文栏等
　　*用于什么用途、表现侧重点是什么，比如博客列表页，会提供内容摘要，便于用户选择阅读，而门户型网站内容列表，会仅仅显示标题，因为信息量大，相册的列表页，总是会做得更加sexy，便于能吸引用户的眼球等。
　　*和页面其他部位的关联，这个需要因应各个的设计的不同，就不具体举例了。

　　3、排除实现的复杂度，找出特效展现的共同特性，并尽可能的想象其实现的一些细节。这部分工作是尤其重要的，因为他决定了一个页面的工作重点所在，通过对这部分重点的细节想象，你会发现如下问题：

　　*现在有什么，还缺什么？
　　*合理程度，这是用户体验基础，不合理的体验，是不会被认可使用的
　　*用户如何操作的，页面的元素如何变化，既能做到惊叹，而又在用户的可理解可被认知范围内，而后最大程度的缓冲系统与用户之间的惊诧点
　　*合理性，合理性，合理性

　　当你确信，在找到上述3个问题的答案后，并且做出足够的思考与预估后，我们可以开始动手制作了。
　　什么优先？什么其次？

　　优先要做的，永远都是通用性、共用性方面的东西，他会伴随在你整个制作过程中。当然，大多数公司，这种通用性存在共识，基础的CSS、基础的 JS Framework。然而，对于项目和任务本身来说，你需要做更多这个项目自身的共用性的工作。其实说白了，就是上面的三个问题。

　　1、问题一所对应的

　　*body 字体，颜色，背景色，背景图，a标签的通用样式
　　*页面布局模式，常用宽度定义等
　　*h1 - h6的样式控制
　　*input、select样式

　　2、问题二所对应的

　　*制作多个和设计元素、设计细节无关的通用性的box模型（甚至不包括宽度的细节），仅仅描述一个模型的骨架性特征。

　　3、问题三对应的

　　*为需要实现特效的部位做足够的兼容性准备。

　　问题1，往往不存在太多的问题，可是大家看看自己写过的CSS，有多少句在页面里定义了字体、字体大小、颜色的，这些部分的代码也都是可以被再次抽象，而再减少对设计细节进行描述的。

　　问题2，是从根本上提高CSS编码质量的一条解决之道。初步了解CSS特性的人，往往会患上重度描述的症状，他们寄望于通过编写大量、甚至是成瘾性的定义样式特性，为求实现设计。确实，这种Hash结构让我们了解到了描述的快感。然而，正式因为这种重度描述，令CSS文件的修改，成为一个令人头疼的所在，密密麻麻的样式声明，不断重复又重复的特性描述，整个样式被定义的面目全非。

　　局部特征描述法，是一个很好的治疗的模式，通过对仅有的若干个特征进行描述，而后进行组合使用，能让我们的HTML和CSS获得解放（代码量），同时带来更多的灵活性（我不再需要对权重过度紧张等）。

　　比如，一个box，相关的box_title，box_content，仅仅描述其结构（如内部关联程度，如padding，margin等），宽度使用相关的样式，如具体的w500（width: 500px），或其使用用途的特征描述，如news_box（定义了具体的某几个样式）。于是我们会得到这样的HTML结构：


01     <div class="box news_box w500 fl">
02         <div class="box_title">
03             <a href="#">新闻Box</a>
04         </div>
05         <div class="box_content">
06             <ul class="news_list">
07                 <li><a href="#">新闻标题1</a></li>
08                 <li><a href="#">新闻标题2</a></li>
09                 <li><a href="#">新闻标题3</a></li>
10             </ul>
11         </div>
12     </div>

很显然，对于一个news_box，我们会有很具体的要求：

1     .news_box .box_title { font-size: 16px; font-weight: bold; }
2     .news_box .box_content { padding: 5px; }
3     .news_list li { height: 20px; line-height: 20px; }
4     .news_list a { padding-left: 10px; background: url(....) no-repeat top left; }

　　这种定义方式，不会破坏box、box_title、box_content相关的结构性样式特质，而通过基于news_box再次写入到 box_title和box_content的样式，可以基于原来的样式的基础上，进行重用，对于专属news_box的样式，我们可以在这里重写。

　　而后，也许我们还有pic_box，还有blog_box，还有很多很多，我们都不需要再对box的结构进行调整，而仅仅只要对每个box的本身的特征进行局部描述。

　　这已经有点类型面向对象开发的方式，但是我不同意把一个标签的多个class认为是一次多重继承，他顶多只能算是一种混入（Mix in），比如Scala中的trait。

　　局部描述还有更多实际使用中的案例，并且，他的技巧和好处远不止于此，这里就不再累赘的进行描述了。

　　问题3，其实要强调的重点，是为开发JS特效预留更加宽松和自由的切入接口。JS特效的问题，会在另外的一篇日志去讲，这里就不再做过多的描述了。

　　现状

　　重构并不是要搞他个刀光剑影、暗无天日，而在于重新树立一些正确的观念苗头。我并不预想着，事实上你也不可能期待，这样一次重构，就能把每件事情做的真的和想象中那样完美无缺。

　　预料之外的，是人对于工作的激情和热诚。这些是无法从言谈中获取得到的，而对于写代码的人来说，也许代码最能说明问题。