Rekey's WebSpace

CSS开发模式

作者：Rekey 发布时间：April 23, 2010 分类：Develop

CSS分为三个部分

1. Reset
2. Layout
3. Mod

CSS Reset : 通用设置,不需要处理.

CSS Layout : 根据设计稿定义的布局定义好整体布局,不频繁改动.

CSS Mod : 各种模块集合.

Reset 和 Layout 作为核心CSS定义.直接影响全局页面展示.所以不轻易进行修改.

Mod 为各个模块的集合.每个模块的CSS只控制模块内部展示,不对外部影响.

CSS关键字列表

由于模块元素的具有很多共同的元素,但是可能表现方式是一致的.所以需要定义一些自身定义的CSS关键字列表.在定义css关键字的类的时候不造成全局影响.

如Author , Title , time 之类的

Mod 开发

每个Mod的相关代码只影响Mod自身,不影响外部展示,比如

html代码:

<div class="mod-a”>
	<span class="img">
		<img src="demo.jpg" alt="" />
	</span>
	<div class="info">
		<a class="title" href="#">item title</a>
		<a class="author" href="#">item author</a>
	</div>
</div>

如果要控制title和author的展示, 使用

CSS代码:

.mod-a .title{
	Color:#f60;
}
.mod-a .author{
	Color:#06f;
}

以用来保持只对mod-a内元素的控制

文件结构

1. Style.css
2. Base.css
3. Mod-a.css
4. Mod-b.css

Style.css作为一个统一的页面css,加载在页面当中.

Base.css 包含CSS Reset 和 CSS Layout ,作为基本样式

Mod-a.css , Mod-b.css 负责每个mod的样式.由不同的团队成员维护

Style.css包含代码

CSS代码:

@import url("base.css");
@import url("Mod-a.css");
@import url("Mod-b.css");

标签: css, webrebuild