Classtyle
CSS框架
了解Classtyle
Classtyle：赋有逻辑的HTML&CSS
HTML、CSS都是简单的描述性语言，本身并没有逻辑。当页面变得越来越复杂多变，就需要一种有效的开发方式来让事情变得有条理一些。
Classtyle就是这样一种开发方法，它借鉴了“面向对象”的思想，结合HTML和CSS语言的特点，将其运用到HTML&CSS开发中。
Classtyle中的“类”和“对象”
顾名思义，Classtyle是基于“类（class）”来开发“样式（style）”。
“类”是一类内容块（比如导航条、列表等）的抽象定义，这类内容块有可能被开发者放置在页面中的任何地方，它们具有一些自身的外观表现，内部可能有一些特定的内容（比如左侧有图片、右侧有文字等），甚至它们还可能有一些特殊的状态和功能（比如处于鼠标划过的状态、处于禁用状态、显示/不显示图片等）。
“类”是在CSS中定义：
CSS
/**
* 一个Classtly类定义的示例
* @class classtyleClass
*/
.classtyleClass{...}
...
在CSS中将“类”定义好后，就可以在HTML文档中使用它们了。这时，就产生了一个属于这个“类”的具体的东西，我们把它称为“对象”。
HTML
<div class="classtyleClass">...</div>
“对象”通常应该有一个名字以便与其他同属一类的“对象”区分，但在Classtyle中“对象”名并不是必须的。
“对象”名建议用HTML元素的id属性来命名，也可以使用class属性：
HTML
<div id="classtyleObject" class="classtyleClass">...</div>
<div class="classtyleObject classtyleClass">...</div>
同属一类的不同“对象”可以拥有不同的外观表现，将这些CSS属性写在“类”定义之后即可覆盖“类”的默认值：
CSS
/**
* Classtly类
* @class classtyleClass
*/
.classtyleClass{...}
...
/**
* Classtly类的一个对象
* @object classtyleObject
* @new classtyleClass
*/
#classtyleObject{...}
...
“封装”
Classtyle中，“类”只能对其内部内容的外观表现进行定义，同时具有保护其内部内容不受其他CSS定义干扰的特性，我们称为“封装”。
“类”的内部内容，我们称为“成员”。Classtyle中所有“成员”都是其所属的“类”私有的，不可直接在某个“类”中调用其他不相关的“类”的“成员”。
建议使用下划线“_”连接“类”名和“成员”名，来为“成员”命名：
CSS
/**
* 一个拥有_member1和_member2成员的Classtly类
* @class classtyleClass
* @member _member1
* @member _member2
*/
.classtyleClass{...}
...
/* member1成员 */
.classtyleClass_member1{...}
...
/* member2成员 */
.classtyleClass_member2{...}
...
Classtyle中，“类”的“成员”仍然是一个“类”，它们在CSS中定义。当HTML中调用时，才成为一个“对象”。
HTML
<div class="classtyleClass">
...
<div class="classtyleClass_member1">...</div>
<div class="classtyleClass_member2">...</div>
...
</div>
“成员”的“对象”名需要用下划线“_”与调用它的“对象”名连接：
HTML
<div id="classtyleObject" class="classtyleClass">
...
<div id="classtyleObject_x" class="classtyleClass_member1">...</div>
<div id="classtyleObject_y" class="classtyleClass_member1">...</div>
<div id="classtyleObject_z" class="classtyleClass_member2">...</div>
...
</div>
<div class="classtyleObject classtyleClass">
...
<div class="classtyleObject_x classtyleClass_member1">...</div>
<div class="classtyleObject_y classtyleClass_member1">...</div>
<div class="classtyleObject_z classtyleClass_member2">...</div>
...
</div>
下面是一些 错误 的使用“成员”的示例：
HTML
<div class="man">
<div class="man_head">
<div class="woman_body"> /*错误地在“man”类的对象中调用了“woman”类的成员“_body”*/
...
</div>
...
</div>
<div class="objZhang man">
<div class="objZhang_head man_head">
<div class="objLi_body man_body"> /*错误的“对象”名*/
...
</div>
...
</div>
CSS
/**
* 一个在classtyleClass类中修改otherClass类的错误示例
* @class classtyleClass
*/
.classtyleClass{...}
.classtyleClass_members{...}
.otherClass{...} /*不能在classtyleClass类的定义中直接修改otherClass类的外观表现*/
“继承”、“派生”
在创建一个“类”的时候，如果这个“类”是以某个已存在的“类”为基础进行扩展，这个过程我们称为“继承”。从已存在的“类”的角度来看，如果需要在这个已存在的“类”的基础上创建一个新“类”，我们称为“派生”。
被当作基础的“类”和新创建的“类”，我们分别称为“基类”（或“父类”）和“继承类”（或“子类”、“派生类”）。“继承类”拥有“基类”的所有“成员”和外观表现，同时拥有自己的“成员”和外观表现。“继承类”可以任意使用、重写“基类”的“成员”和外观表现，但“基类”不能反过来使用、重写“继承类”的成员和外观表现。
“继承”和“派生”本是同一个过程的不同说法，但在Classtyle中，“继承”和“派生”出来的新“类”在命名上有不同的规则：
建议使用中划线“-”连接“基类”名和“派生”出来的“继承类”名来为“继承类”命名，在HTML中，需要在class属性中同时写上“基类”和“继承类”的类名：
CSS
/**
* 基类
* @class classtyleClass
* @member _member
*/
.classtyleClass{...}
...
/**
* 继承类
* @class classtyleClass-new
* @base classtyleClass
* @member _member
*/
.classtyleClass-new{...}
.classtyleClass-new_member{...}
.classtyleClass-new .classtyleClass_member{...} /*重写基类classtyleClass的成员_member*/
HTML
<div class="classtyleClass classtyleClass-new">
<div class="classtyleClass_member"></div> <!--classtyleClass类的成员_member-->
<div class="classtyleClass-new_member"></div> <!--classtyleClass-new类的成员_member-->
</div>
至于“继承”，只需在HTML中同时写上“基类”和“继承类”的类名即可，无需使用“-”连接来命名“继承类”。
HTML
<!--myClass类的成员myClass_member类“继承”classtyleClass类-->
<div class="myClass">
<div class="myClass_member classtyleClass">
<div class="classtyleClass_member">...</div>
</div>
</div>
CSS
/**
* myClass类
* @class myClass
* @member _member
* @requires classtyleClass
*/
.myClass{...}
...
区分“继承”和“派生”的目的在于，“派生”的情况相对稳定，开发者从“基类”派生出“继承类”后，一般不会轻易调整它们的继承关系。“继承”则更灵活，即使调整继承关系，也不用更改类名。“派生”更适合可预见的情况，“继承”更适合不可预见的情况。
Classtyle中，“继承类”可以同时继承多个不同的“基类”来达到目的：
HTML
<!--myClass类的成员myClass_member类“继承”class1类和class2类-->
<div class="myClass">
<div class="myClass_member class1 class2">
<div class="class1_member">...</div>
<div class="class2_member">...</div>
</div>
</div>
CSS
/**
* myClass类
* @class myClass
* @member _member
* @requires class1,class2
*/
.myClass{...}
...
下面是一些 错误 的使用“继承”或“派生”的示例：
HTML
<div class="classtyleClass-new"> <!--class属性中缺少“基类”的类名-->
...
</div>
<div class="classtyleClass classtyleClass-new classtyleClass-newer">
<!--
如果classtyleClass-newer是classtyleClass-new的“继承类”，
类名应该为“classtyleClass-new-newer”;
如果是“继承”多个“基类”，那缺少“继承类”的类名。
-->
...
</div>
CSS
/**
* classtyleClass类
* @class classtyleClass
* @member _member
*/
.classtyleClass{...}
.classtyleClass .classtyleClass-new_member{...} /*“基类”不能重写“继承类”的成员。*/
...
/**
* classtyleClass-new类
* @class classtyleClass-new
* @base classtyleClass
* @member _member
*/
.classtyleClass-new{...}
.classtyleClass-new_member{...}
...
“命名空间”
如果开发者想让某些“类”在不同项目中使用，为了避免与项目中的类名重名冲突，可以使用“命名空间”。
建议“命名空间”使用中划线“-”与类名连接：
CSS
/**
* cs-classtyleClass类
* @class cs-classtyleClass
* @namespace cs
*/
.cs-classtyleClass{...}
...
Classtyle框架的CSS库提供的“类”，都在“cs”命名空间下。
CSS库和扩展
Classtyle框架的CSS库提供了必要的功能，它包含了CSS Reset以及一些实用的“类”供开发者使用。
非必要的功能由扩展提供，由开发者自行选择。
CSS库
功能
页面结构
页面类型
模块
文本类型
文本样式
表单控件
Classtyle入门
我们示意图为例，演示如何使用Classtyle框架开发页面。
页面结构（页头、主体及页脚）
我们略去html、head、body等标签的说明，从body标签内部开始演示。
Classtyle页面的根节点是“cs-page”，所有页面内容都应该出现在根节点中。页头、主体和页脚是根节点的子节点，类名分别为“cs-header”、“cs-body”和“cs-footer”。
<div class="cs-page">
<div class="cs-header"></div>
<div class="cs-body"></div>
<div class="cs-footer"></div>
</div>
在CSS中重写“cs-page”类，设置合适的页面宽度。
/**
* 整体
* @class cs-page
*/
.cs-page{width:950px}
在CSS中重写“cs-header”类，设置合适的页头高度。
/**
* 页头
* @class cs-header
*/
.cs-header{height:90px}
在CSS中创建“logo”和“nav”类。
/**
* 标识
* @class logo
*/
.logo{width:...;height:...}
/**
* 导航条
* @class nav
* @member _item
*/
.nav{width:...;height:...}
.nav_item{float:left;width:...}
.nav_item:hover{...}
“cs-header”的两个匿名成员（也可以命名为“cs-header_logo”和“cs-header_nav”）分别继承“logo”和“nav”。
<div class="cs-page">
<div class="cs-header">
<h1 class="logo">Demo</h1>
<ul class="nav">
<li class="nav_item">Nav1</li>
<li class="nav_item">Nav2</li>
<li class="nav_item">Nav3</li>
</ul>
</div>
<div class="cs-body"></div>
<div class="cs-footer"></div>
</div>
如为cs-header的成员命名，则为：
<div class="cs-page">
<div class="cs-header">
<h1 class="cs-header_logo logo">Demo</h1>
<ul class="cs-header_nav nav">
<li class="nav_item">Nav1</li>
<li class="nav_item">Nav2</li>
<li class="nav_item">Nav3</li>
</ul>
</div>
<div class="cs-body"></div>
<div class="cs-footer"></div>
</div>
在“cs-header”类中设定“logo”和“nav”成员的位置。
/**
* 页头
* @class cs-header
*/
.cs-header{...}
.cs-header .logo{float:left}
.cs-header .nav{float:right}
如为cs-header的成员命名，则为：
/**
* 页头
* @class cs-header
* @member _logo
* @member _nav
*/
.cs-header{...}
.cs-header_logo{float:left}
.cs-header_nav{float:right}
在"cs-body"中创建两个匿名成员，继承“cs-part”的派生类“cs-part-1”和“cs-part-2”来实现左右栏布局。
<div class="cs-page">
<div class="cs-header">
<h1 class="logo">Demo</h1>
<ul class="nav">
<li class="nav_item">Nav1</li>
<li class="nav_item">Nav2</li>
<li class="nav_item">Nav3</li>
</ul>
</div>
<div class="cs-body">
<div class="cs-part cs-part-1"></div>
<div class="cs-part cs-part-2"></div>
</div>
<div class="cs-footer"></div>
</div>
在CSS中重写“cs-part-1”和“cs-part-2”类。
/**
* 主栏
* @class cs-part-1
* @base cs-part
*/
.cs-part-1{float:left;width:...}
/**
* 侧栏
* @class cs-part-2
* @base cs-part
*/
.cs-part-2{float:right;width:...}
在CSS中创建“box”类来实现侧栏的模块。
/**
* 模块
* @class box
* @member box_hd
* @member box_hd_title
* @member box_bd
* @member box_ft
*/
.box{border:...;padding:...}
.box_hd{background:...}
.box_hd_title{font-size:...}
.box-bd{padding:...}
.box-ft{}
未完待续 2011-5-13