面向對象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》