面向對象CSS (OOCSS)

新版 OOCSS 請關注 http://www.oocss.cc/css


      時下流行面向對象,那麼有沒有可能把樣式表也面向對象一下呢,將如今的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"></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》

相關文章
相關標籤/搜索