在大家大呼标准开发慢的时候，我想到的第一次件就是如何减少重复的劳动，提高工作效率。所以就有了那些下载的辅助文件。语法剪辑库、语法自动完成。能过这些方式我们可以大大加快开发速度，但是作为标准如果想得到大步的发展那就必需要让标准开发更快更好。从我两年以来的学习与实践来看我们有很多东西事实上是没有多大变化的。比如大布局形式、标志、导航、评论、列表、分页很多地方看上去好像是变动了很多，但是说白了看透了就只是那几种，变化最大的是样式。而CSS中有一部分的语句是用来管理布局结构的，另一半才是色彩、背景之类的。
如果我们把这些常用的地方都做成组件，每每用到就复制到相应地点，那么写一个标准化的网站就会显得不那么麻烦了。并且设定好基本样式，由使用后进行修改而不是到时再想怎么写，或是思考需要应对的兼容性问题。而兼容性问题一直以来都与色彩或是背景无关的。主要是长宽、距离、位置等所产生的。而这些本身也可以事先解决。
比如我自定义了一个分页组件，这个组件分成xHTML与CSS两个部分：
<!-- xHTML -->
<div class="pagination">
<div class="pagNum">
<span>97</span>
<a href="" title="">1</a> <a href="" title="">2</a>
3
<a href="" title="">4</a> <a href="" title="">5</a>
<a href="" title="">6</a> <a href="" title="">7</a>
<a href="" title="">8</a> <a href="" title="">9</a>
<span> <a href="" title="">8</a><a href="" title="">:</a></span>
</div>
<form method=post action="">
<input type="text" name="" size="5" />
</form>
<div class="pagData">1/63页 本页:3 总数:499</div>
</div>
<div class="pagination">
<div class="pagNum">
<span>97</span>
<a href="" title="">1</a> <a href="" title="">2</a>
3
<a href="" title="">4</a> <a href="" title="">5</a>
<a href="" title="">6</a> <a href="" title="">7</a>
<a href="" title="">8</a> <a href="" title="">9</a>
<span> <a href="" title="">8</a><a href="" title="">:</a></span>
</div>
<form method=post action="">
<input type="text" name="" size="5" />
</form>
<div class="pagData">1/63页 本页:3 总数:499</div>
</div>
/*-- CSS --*/
.pagination {background:#E3E0DC; padding:0 10px; height:40px; color:#333; margin: 0 12px 0 0 !important; margin: 0 6px 0 0; text-align:right; display:block; clear:both; }
.pagination .pagNum {font-size:24px; font-family:Georgia; font-weight:bold; font-style:italic; color:#490; display:inline; text-align:right; padding-right:5px;}
.pagination .pagNum a {font-size:12px; font-family:Verdana; font-style:normal; color:#333; text-decoration:underline;}
.pagination .pagNum span {font-size:12px; font-weight:bold; font-style:normal; color:#666;}
.pagination .pagNum span a {color:#f60; font-size:12px; text-decoration:none; font-weight:bold; }
.pagination form {display:inline;}
.pagination .pagData {line-height:40px; font-family:Verdana; text-align:right; display:inline; padding:0 5px 0 0;}
.pagination input {border:1px solid #f70; background:#fff; height:18px; margin-top:5px;}
.pagination {background:#E3E0DC; padding:0 10px; height:40px; color:#333; margin: 0 12px 0 0 !important; margin: 0 6px 0 0; text-align:right; display:block; clear:both; }
.pagination .pagNum {font-size:24px; font-family:Georgia; font-weight:bold; font-style:italic; color:#490; display:inline; text-align:right; padding-right:5px;}
.pagination .pagNum a {font-size:12px; font-family:Verdana; font-style:normal; color:#333; text-decoration:underline;}
.pagination .pagNum span {font-size:12px; font-weight:bold; font-style:normal; color:#666;}
.pagination .pagNum span a {color:#f60; font-size:12px; text-decoration:none; font-weight:bold; }
.pagination form {display:inline;}
.pagination .pagData {line-height:40px; font-family:Verdana; text-align:right; display:inline; padding:0 5px 0 0;}
.pagination input {border:1px solid #f70; background:#fff; height:18px; margin-top:5px;}
上面的xHTML结构是我们需要经常用到的，据我观察基本上我们不会没事找事的改动这样的结构，并且这样的代码能适就各样的样式表现形式。而下面的样式虽然已经设定好了样式内容，不过也只是给出一样大致的样式，依据已经有的样式进行样式的改动同样也可以提高效率，加之更多时候我们并不太在意这样的局部样式，只要形式合适可以基本上不作改动的使用。
同样的我们是不是什么样的内容都成作为组件来分使用呢，不然，如果想要做好一个非常有创意的网站其花费时间是必需要的，因为组件只不过是对于重复劳动的一种解脱，而一个创意性的网站其每个部位都有可能是全新的，并且是结构性的变化。所以这个组件，只是让我们用来应对平时正常的工作内容使用。
作者 / 振之网站 / 毅博客 http://andy.andymao.com/
电话 / (86)025 5890 9295
