2010-08-26

CSS 面向对象结构设计_CSS Object Oriented Structure Design

看过国外和国内的一些面向对象的css文章，他们借用js或php实现了继承，重用。这样做到底对我们工作的简化，效率的提高有多少好处我不得而知。

而我现在做的是用现有的css实现面向对象的结构，并且借鉴J2EE 的mvc架构实现css的高度复用,快速开发和简便维护，以下是面向对象结构的简要介绍和代码实现。

简介

在日常的开发中总有重复的代码要写，熟悉了自然就快了，当然工作质量肯定能保证，但每天写这些重复的代码多少有点无味。css可以面向对象吗？不可以。所以很多人用javascript来辅助实现，能不使用js来实现吗，我想试一试。之所以不能达到大规模的重用，我认为是css的class粒度不够细，就像下面这行代码，我敢保证一个页面最多只能用一次：
#banner #nav li a{ height:92px; width:142px; text-align:center; display:block; background:url(../images/link_common_bg.png) repeat-x 0 top; text-decoration:none; color:#666;
font:bold 1.5em/100px arial,verdana; color:#666; }
而里面的许多属性，我敢保证你使用了千万次：
text-align:center; display:block;text-decoration:none;font-weight: normal;
为什么不把使用了千万次的单个属性单独写成一个类，以便重复调用？换句话说，就是让这些单一的属性成为一个个的小”积木块”，需要的时候拿来自由组合。例如font属性font-family富于多变，而font-weight的属性值永远只有那几种。甚至是font-size属性，也有一个常用值：font-size:12px;这些常用值都可以被写成一个单独对象。
并且我在页面也加入了page通用的对象如banner，sidebar等等，加入它们是因为可以利用css同名类属性合并的特性，这样这真正的项目代码中页面对象里面的样式属性可以顺利被继承或重写(这一点和java的面向对象很类似)。
在页面中标签的class类个数会较多，但刚好页面可以使用一个java的自定义标签来将每个细粒度的类进行配置，这刚好实现了页面的简便维护和低耦合。

css面向对象的结构

[caption id=”” align=”alignnone” width=”600”] css 面向对象结构设计图[/caption]

对java mvc结构的引用

[caption id=”” align=”alignnone” width=”600”] mvc结构的应用[/caption]

1. 现有框架解决了什么问题，缺点是什么？

样式重设，IE bug处理，缺点是没有进行对象结构扩展，实现最大程度的复用。

2. 我所面临的问题？

不断重复类似功能的代码,并且面向结构，复用度太低,应该在功能上进行完全的分离。

3. 我要实现的目标？

90%以上css代码的重用，面向对象结构，加入细粒度对象和布局对象，加入CSS交互控制模块和css插件模块。

4. 框架的优点?

多浏览器兼容,遵循web标准,代码量少,结构清晰,快速开发,高度复用，维护简便，易于理解使用。

5. 框架带来的问题?

Html页面过多的class元素，因为放弃多级选择器，导致原本不使用class的元素使用class。

6. 框架如何实现高度复用和简便维护?

加入大量的原子对象，以进行自由的重用。
增加页面常用对象,以便在项目代码中进行重写。
使用java taglib来维护class数量过多的页面标签,方便后期扩展和维护(并且taglib很好的解决了Html页面过多的class元素的问题)。
在元素的命名等方面进行约束,避免后期维护困难。

命名规则的约束:

ID用来作js控制
.c_title 下划线表示js控制的css元素
.css3_round css3和下划线一起表示css3对象
.image-1 中杠表示jquery插件的控制对象

如何实现:

首先需要一套css reset代码,yahoo css reset和blueprint都是不错的选择。

然后新建一个css文件，在其中将通用css对象进行创建
例如:rain.css

/**

Atomic Css Objects

/
/ font
free properties 用于表现的css属性，富于变化，不作设定
–font-family
–font-size
–font
*/
.fontNormal{ font-style:normal;}
.fontItalic{ font-style:italic;}
.fontOblique{ font-style:oblique;}
…

/**

Page Layout Css Objects

/
/– container object use –*/
.container{ width:1000px;}

/– banner.css – banner object and sub-objects 这些页面布局常用class可以被定义，易于重写–/
.banner{ margin-bottom:10px; background:#F2F2F2;}
.logo{ width:200px; padding:20px 0 0; margin:0;}
…

/– ———-project code 用于实际项目代码对page object对象进行重写———- –/
input.text, input.title {width:400px;}
.text_shadow{ text-shadow: 1px 1px 3px rgba(50, 50, 50, 0.3);}
body{ background:url(../images/top_bg.png) repeat-x 0 0;}
…

再者就是页面的应用了，例如home.html

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns=”http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<!– Framework CSS –>
<link rel=”stylesheet” href=”css/blueprint/screen.css” type=”text/css” media=”screen, projection”/>
<!–[if lte IE 8]><link rel=”stylesheet” href=”css/blueprint/ie.css” type=”text/css” media=”screen, projection”><![endif]–>
<link rel=”stylesheet” href=”css/rain.css” type=”text/css” media=”screen, projection”/>

</head>
<body>
<div class=”container”>
<div class=”banner”>
<h1 class=”logo displayBlock overflowHide”>…</h1>
</div>
</div>
</body>
</html>

很明显可以看出class类的引用会随着样式的复杂化而越来越多，在web交流会上的朋友提出了一个问题：怎样保证样式的变更而页面不需要修改?

这正是使用java taglib来维护class数量过多的页面标签的原因。在java web项目中，可以将csstl.jar拷贝到lib文件夹下,在src文件夹下新建css.properties文件，所以最后home.jsp页面会是这样：

<%@ page contentType=”text/html; charset=utf-8” language=”java” errorPage=””%>
<%@ taglib uri=”csstags” prefix=”s”%>

而css.properties文件中则写入要加载的css类:
logo = logo displayBlock overflowHide

CSS面向对象结构的实现:
www.webdevelopmentmachine.com/resources.html#cssframework

宅鱼

部落格