面向对象的CSS－－OOCSS [转]
2009-10-11 20:23 一醉而过 阅读(1721) 评论(0) 编辑 收藏 举报
时下流行面向对象，那么有没有可能把样式表也面向对象一下呢，将现在的ＣＳＳ（Cascading Style Sheets层叠样式表）进
化一下，演变成面向对象的样式表，给套了个概念上去，以下叫“OOCSS”，即 Object Oriented Cascading Style Sheets。
◆ 为什么会这样想？
没办法，被逼的， 俺们公司的美工只做图片，其它的是啥都不管，近来弄个WEB项目，都做差不多了，老总说要能换肤。呵呵
还好之前有所考虑，三两天就搞定了。
我的方法是，页面全部用CSS控制，主要有 common.css、list.css、addedit.css等10来个css文件和图片，全部放一个叫
Common/Skins的目录下 ，Common/Skins下每套皮肤一个文件夹，最终目录结构大致如下。
2 Common/Skins/Green
3 Common/Skins/Green/Common.css
4 Common/Skins/Green/List
5 Common/Skins/Green/List/list.css
6 Common/Skins/Green/List/Images/
7 Common/Skins/Green/List/Images/imgxxxx.gif
8 Common/Skins/Green/AddEdit/AddEdit.css
9 Common/Skins/Green/AddEdit/Images/
10 Common/Skins/Green/AddEdit/Images/imgxxxx.gif
11
12 Common/Skins/Blue
13 Common/Skins/Blue/Common.css
14 Common/Skins/Blue/List
15 Common/Skins/Blue/List/list.css
16 Common/Skins/Blue/List/Images/
17 Common/Skins/Blue/List/Images/imgxxxx.gif
18 Common/Skins/Blue/AddEdit/AddEdit.css
19 Common/Skins/Blue/AddEdit/Images/
20 Common/Skins/Blue/AddEdit/Images/imgxxxx.gif
共定义有5、6套皮肤，CSS和图片文件急剧上涨，由原来的10来个一下子上升到了7，8十个，虽然数量是有点吓人，不过每套
皮肤，CSS和图片都大部分差不多，也没花多少功夫就搞定了，不管了，甩一边。
几天后的某一天早晨，好大的台风，呼呼的，雨也不小，让人觉得很不爽，就像出事前的预兆 ！
果然，没坐下多久，老总过来说“和美工讨论了下，有几个地方，布局要变下......”。
一阵的嘻哩哗啦之后，我心里除了佩服老总口才不错之外，觉得自己命好苦呀！
那么多CSS，得改多久呀，以后要再变的话不还得改吗！
仔细分析下CSS，其实每套皮肤都大体差不多，不同的地方一般都是边框、文字的颜色和背景色，还有图片、字号，于是我决定
所有的皮肤都用同一套公共的CSS文件，另外，每套皮肤再加一个独立CSS文件（Settings.css），而该CSS中只定义基本的样式，
相当于配置文件一样的，然后作用于其余几个公共的CSS文件。
我坚信这样的思路是对的，可是怎么实现呢？
首先想到的，当然是用CSS的组合，将之前部分CSS规则分离，公共部分提取出来放在 Settings.css中定义，如：
将List.css中规则
.ToolBar{color:#f0e000;border:1px solid gray;}
分离为
.DefaultColor{color:#f0e000;}定义在Settings.css中
.ToolBar{border:1px solid gray;}仍然保留在List.css中
然后将HTML中对 .ToolBar 的引用“class='ToolBar'”改为“class='DefaultColor ToolBar '”
再将其它color属性相同的CSS规则进行同样的分离。这样每套皮肤不同的地方就只是 settings.css文件里.DefaultColor类型
的规则。
而这样做又引发的新的问题，必须得每个页面改HTML中的class属性，而背景图片只能依靠 expression 来解决，expression
又常常造成页面的死锁，无奈之下只有另谋出路。
◆ 面向对象的CSS： OOCSS 基本构思
继承：
OOCSS中，类（样式规则）可以继承自另一类，如
.Base{font-size:20pt;}
.Sun{color:red;}
假如用如下语法可以实现继承
.Base{font-size:20pt;}
.Sun (inherit .Base)
{
color:red;
}
而现在类 .Sun 则不单单拥有 “color：red;”属性，应该拥有从基类 .Base 中继承的 “font-size:20pt”属性 ，
cssText应该是 “font-size:20pt;color:red”。
覆盖：
将上例中的 .Sun 更改如下：
.Base{font-size:20pt;}
.Sun (inherit .Base)
{
font-size:10pt;
color:red;
}
则实现了对基类“font-size:20pt”的覆盖，.Sun中的font-size则为10pt。
子类访问基类
在基类 .Base 中定义了变量 “v:20”和style属性“font-size:20pt”，子类 .Sun和.Sun2中style属性padding和
font-size通过访问基类变量和属性计算而来，而最终 .Sun 中 padding等于30px，.Sun2中padding等于40px；.Sun中
fong-size等于10pt，.Sun2没有覆盖基类中的font-size，所以font-size继承基类，值仍为20pt。
多继承
类.Sun继承自两个基类.Base和.Base2，所以.Sun的cssText为“font-size:20pt;color:red;padding:20px;”，而
.Grandson继承自.Sun，本身没有任何自定义属性，因此cssText和.Sun一样，仍为“font-size:20pt;color:red;
padding:20px;”。
私有（假如用private作为关键字）
子类 .Sun 继承基类 .Base 中的fontSize属性，因为 .Base中color属性受private(私有)限制，不能被.Sun继承，最终
.Sun的cssText是“font-size:20pt;padding:10px”。
更多特性待琢磨......
◆ 这样做有意义吗？
我的回答是“有” ！
1. CSS的优点之一“一处定义，多处使用”
目前的CSS多处使用指的是，一个CSS规则可以由多个HTML元素引用。可CSS规则间不能互操作。
2. CSS的继承
CSS的继承不是真正意义上的继承，而是HTML元素对外层元素Style属性的继承，且部分Style属性、HTML元素是不能
继承的，如backgroundColor属性、border属性、padding属性、table元素等等（当然，部分不支持继承也是合理的）。
3. CSS优先级
当多个CSS规则作用于同一个HTML元素时，CSS将根据CSS规则权重 、规则定义的先后配合HTML元素的层次关系决
定最终的有效值，这样的解决方案有时很巧妙，可当HTML层次结构过深、而作用于同一个HTML元素的CSS规则过多时，
CSS规则的优先级控制是相当的不容易，有时候不得不用蹩脚的“! important”来解决问题，可“! important”不符合标
准，支持的浏览器很少。
OOCSS在保留CSS特性（或者说是优点）的前提下，将从某种程度上解决以上问题
1. OOCSS中，类可以访问基类甚至没有依赖关系的其他类，应用灵活......。
2. OOCSS中，继承是类对基类属性的继承，不同于CSS中的继承（HTML元素对上层元素Style属性的继承），子类直接继承
基类不受private（私有）关键字修饰的属性。
3. OOCSS实现继承后，就会在一定程度上避免CSS组合的应用，便会减少意外的HTML元素匹配，同时HTML元素在class属
性中应用子类时，权重跟基类无关，和子类一致，如例三中，子类 .Sun 的权重跟基类 .Base1、.Base2无关 。
◆ 我认为OOCSS很有趣，也有用，想了解一下！
上面的想法都是建立在假如的基础上的，都只是我一种猜想而已
.Base
{
font-size:20pt;
private color:red;
}
.Sun (inherit .Base)
{
padding:10px;
}
这样的代码各位都不认识，浏览器又怎么会认识呢，那么是不是就不能实现呢？不是的，我们可以通过一些其他方法模拟，
虽然有些尴尬！
我的做法是，写个JS解析，基本实现以上想法，代码太多，不方便贴出来，供下截
下载：http://oocss.66s.net.cn:81/oocss/OOCSSDemo.rar
https://files.cnblogs.com/kuiyouli/OOCSSDemo.rar
演示：http://oocss.66s.net.cn:81/oocss/?Skin=1
有兴趣的朋友可进入QQ群：15774494
注：仅作为一种新方法的尝试，目前只支持IE浏览器
实现功能如下:
1. 继承
因为浏览器不支持 .Sun (inherit .Base) 这样的语法，所以改为如下形式：
.DefaultColor{color:red;}
.Sun
{
base: .DefaultColor;
font-size:9pt;
}
用 “base”关键字指定基类，注意是“.DefaultColor”，而不是“DefaultColor”，基类必须是类全称，可以指定多个基
类，如：
.BaseHeight{height:30px;}
.DefaultColor{color:red;}
.Sun
{
base: .DefaultColor,.BaseHeight;
font-size:9pt;
}
2. 附加
跟继承类似，实现的却是CSS的组合功能。
.BaseHeight{height:30px;}
.DefaultColor{color:red;}
.Sun
{
append: .DefaultColor,.BaseHeight;
font-size:9pt;
}
当HTML元素引用类 .Sun 时，OOCSS会自动将 .DefaultColor、.BaseHeight附加到HTML元素的class属性，如：
<div class=".Sun"></div>
则该div最后的class属性值为“.Sun .DefaultColor .BaseHeight”。因此，.DefaultColor、.BaseHeight中的属性受
其优先级的影响，跟.Sun的优先级无关。
3. eval表达式
eval表达式类似expression表达式，不同之处在于，eval只在初始化时执行一次。
.TestEval
{
E-height: eval(20+30);
}
相当于：
.TestEval
{
height: 50px;
}
可以在eval中访问脚本变量，如：
<script>
var skin={color:'red', defaultSize:'9pt'}
</script>
<style>
.TestEval
{
E-color: eval(skin.color);
E-font-size: eval(skin.defaultSize);
}
.LargeFont
{
e-font-size:eval( (parseInt(skin.defaultSize)+3)+"pt" )
}
</style>
以上代码相当于：
<style>
.TestEval
{
color: red;
font-size: 9pt;
}
.LargeFont
{
font-size:12pt;
}
</style>
4. .Global或.Init初始化
可以类名为 .Global或 .Init的类配合eval关键字初始化。
<style>
.Global
{
E-init: eval( window.skin={color:'red', defaultSize:'9pt'} );
}
.TestEval
{
E-color: eval(skin.color);
E-font-size: eval(skin.defaultSize);
}
</style>
以上代码相当于：
<style>
.TestEval
{
color: red;
font-size: 9pt;
}
</style>
5. 访问基类
通过eval关键字和base关键字，访问基类对象。
.DefaultHeight{height:30px;}
.Sun
{
base: .DefaultHeight;
E-height: eval(parseInt(base.height)+20);
}
相当于：
.Sun
{
height: 50px;
}
当有多个基类时，则可以这样访问：
.DefaultColor{color:red;}
.DefaultHeight{height:30px;}
.Sun
{
base: .DefaultColor ,.DefaultHeight;
E-height: eval(parseInt(base[1].height)+20);
}
也可以这样访问
.DefaultColor{color:red;}
.DefaultHeight{height:30px;}
.Sun
{
base: .DefaultColor ,.DefaultHeight;
E-height: eval(parseInt(base[DefaultHeight].height)+20);
}
相当于：
.Sun
{
color: red;
height: 50px;
}
6. 私有成员
下一版本实现......
转载请注明出自http://www.cnblogs.com/kuiyouli/archive/2008/10/14/1295572.html,谢谢!
推荐相关阅读:走走停停看看的《从模块化CSS到面向对象的CSS》
