新版 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
共定義有五、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」和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 的權重跟基類 .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》