面向对象CSS (OOCSS)

时间 2019-11-12

标签面向对象 css oocss 栏目软件设计繁體版

原文原文链接

新版 OOCSS 请关注 http://www.oocss.cc/css

时下流行面向对象，那么有没有可能把样式表也面向对象一下呢，将如今的ＣＳＳ（Cascading Style Sheets层叠样式表）进html

化一下，演变成面向对象的样式表，给套了个概念上去，如下叫“OOCSS”，即 Object Oriented Cascading Style Sheets。express

◆ 为何会这样想？浏览器

没办法，被逼的，俺们公司的美工只作图片，其它的是啥都无论，近来弄个WEB项目，都作差很少了，老总说要能换肤。呵呵app

还好以前有所考虑，三两天就搞定了。模块化

个人方法是，页面所有用CSS控制，主要有 common.css、list.css、addedit.css等10来个css文件和图片，所有放一个叫布局

Common/Skins的目录下，Common/Skins下每套皮肤一个文件夹，最终目录结构大体以下。ui

1 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

共定义有五、6套皮肤，CSS和图片文件急剧上涨，由原来的10来个一会儿上升到了7，8十个，虽然数量是有点吓人，不过每套google

皮肤，CSS和图片都大部分差很少，也没花多少功夫就搞定了，无论了，甩一边。spa

几天后的某一天早晨，好大的台风，呼呼的，雨也不小，让人以为很不爽，就像出事前的预兆！

果真，没坐下多久，老总过来讲“和美工讨论了下，有几个地方，布局要变下......”。

一阵的嘻哩哗啦以后，我内心除了佩服老总口才不错以外，以为本身命好苦呀！

那么多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;
                    font-size:20pt;
            }

            .Sun (inherit .Base)
            {
                    padding : (base.v+10)px;
                    font-size:(base.fontSize/2)pt;
                    color:red;
            }

            .Sun2 (inherit .Base)
            {
                    padding : (base.v+20)px;

}

在基类 .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。

多继承

例三

.Base{font-size:20pt;}

.Base2{color:red;}

            .Sun (inherit .Base，.Base2)
            {
                    padding:20px;
            }

.Grandson (inherit .Base)
{

}

类.Sun继承自两个基类.Base和.Base2，因此.Sun的cssText为“font-size:20pt;color:red;padding:20px;”，而

.Grandson继承自.Sun，自己没有任何自定义属性，所以cssText和.Sun同样，仍为“font-size:20pt;color:red;

padding:20px;”。

私有（假如用private做为关键字）

例四
            .Base
             {
                    font-size:20pt;
                    private color:red;
             }

            .Sun (inherit .Base)
            {
                    padding:10px;
            }

子类 .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 的权重跟基类 .Base一、.Base2无关。

◆ 我认为OOCSS颇有趣，也有用，想了解一下！

上面的想法都是创建在假如的基础上的，都只是我一种猜测而已

            .Base
             {
                    font-size:20pt;
                    private color:red;
             }

            .Sun (inherit .Base)
            {
                    padding:10px;
            }

这样的代码各位都不认识，浏览器又怎么会认识呢，那么是否是就不能实现呢？不是的，咱们能够经过一些其余方法模拟，

虽然有些尴尬！

个人作法是，写个JS解析，基本实现以上想法，代码太多，不方便贴出来，供下截

下载：http://oocss.66s.net.cn:81/oocss/OOCSSDemo.rar
http://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 .DefaultColor .BaseHeight”。所以，.DefaultColor、.BaseHeight中的属性受

其优先级的影响，跟.Sun的优先级无关。

3. eval表达式

eval表达式相似expression表达式，不一样之处在于，eval只在初始化时执行一次。

                     .TestEval
                    {
                         E-height: eval(20+30);
                    }

至关于：

                     .TestEval
                    {
                         height: 50px;
                    }

能够在eval中访问脚本变量，如：

                         .LargeFont
                         {
                              e-font-size:eval(     (parseInt(skin.defaultSize)+3)+"pt"     )
                         }
                    </style>

以上代码至关于：

                         .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>

以上代码至关于：

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》