文：孙极

web前端的世界里，结构、表现、行为三足鼎立。

在JavaScript统领的行为层已经涌现出YUI、jQuery、Prototype等众多框架，而在表现层和结构层却鲜有被大众所接受的框架。

什么样的东西被称为框架？

框架可以像jQuery那样是一个盒子，它提供了非常多的方法来实现常用的那些功能，而你完全可以不关心它是如何帮你实现的。

框架甚至可以改变你写JavaScript的习惯。

表现层可以有框架吗？

可以，但是非常有难度。先来看看CSS框架的利弊：

弊1：CSS代码臃肿

实现一些表现层的效果往往需要大量的CSS代码。更何况，框架要提供丰富的效果，需要一个十分庞大的CSS文件。

弊2：提高学习成本

使用框架的人，要按照框架制定的一些规则去写代码；要理解框架里各种class名的含义；要知道框架如何对整个网站的样式进行控制……

要是在完全没有了解框架是如何工作的情况下使用框架，结果只会变得一团糟。

弊3：框架的开发难度大

开发一个CSS框架，好比给成千上万风格迥异的网站写global.css，难度可想而之。

但是……

利1：标准化的代码书写

按照框架的规则去写代码其实是十分愉快的事情。你不用再犹豫文章列表的日期是用<span>还是其他的什么标签；也不用再犹豫写一个Form表单的时候如何合理的使用标签……

符合规则的代码的好处还有：HTML代码是固定不变的，想实现什么效果就看CSS了。

再顺便提一下，按照规则写出来的代码是可以通过W3C XHTML1.0严格型标准校验的。并且在刨除CSS的情况下也保持良好的可读性，你可以带着它去参加一年一度的CSS裸体节。

利2：团队合作更默契

通过对框架的学习，团队成员能够一致的理解如何使用框架完成一个页面，交流起来自然更默契。

利3：快！

你可以省掉非常多的“犹豫不决”的时间。通过框架快速的帮你实现布局、一些常见的列表等功能。

利4：Skin可以共享

得益于符合规则的HTML代码，站点之间的皮肤是可以共享的。

话说，如果项目部和商脉通使用一样的框架……那么，项目部积累的这么多优秀的网页设计就可以轻易的作为商脉通的皮肤使用……（YYing……）

关于Classtyle框架

除了以上几个优点外，Classtyle还有以下一些特点：

• 借鉴了面向对象封装与继承思想，将页面里的元素作为类去考虑，而class和id分别代表了类名和对象名。

  好处在于，类与类之间互不影响；类和类有继承的关系，尽可能的重用CSS代码。

• 将扩展性的功能作为“组件”加入到框架中，而不作为框架的主体。

  避免将所有功能写进一个文件造成的过于臃肿的CSS代码，可以按实际情况选择“组件”。

  可以不断的开发“组件”对框架进行扩展。

• 框架的CSS文件有三类：主文件，原型库和皮肤Skin。绝大部分情况下，你只需要修改和制作Skin即可。

  假如对框架某些默认属性不满意，可以随意的通过Skin文件重写这些属性。

  商脉通新前台使用的是为商脉通量身打造的SMT原型库，根据商脉通的实际情况设置了一些默认原型样式。

• 等等……

对于“学习成本”这个弊端，可以通过专用的“编辑器”来解决。“编辑器”包含了那些繁多的规范的html代码，帮你屏蔽掉了复杂的框架、插件的概念和类与类之间继承的关系。

在“编辑器”里你只需要——1、选择布局 2、加入内容模块 3、设置样式。

和商脉通后台的页面编辑模式不同的是，一个用Javascript开发的离线版“编辑器”会和Classtyle的正式版本一同提供下载。

也许，以后的团队合作方式是……

1. 老大用“编辑器”弄了个HTML原型，开会、讨论、通过。
2. 设计师参照原型进行设计。同时，程序员使用这个原型的HTML代码开始开发。
3. 设计师交付CSSer切图，在这个原型HTML代码上开始写Skin.css
4. 最后一步，给程序加上一段<link>，大功告成！