面向對象的樣式表OOCSS(Object Oriented Cascading Style Sheet)
一、命名規范
a)Div+css 命名規范
i.標簽定義 (全局)
1.Body
2.H1
3.H2
4.H3 …
5.a
6.a:linked
7.a:visted
8.a:hover
ii.類的命名
1.Div 寬度定義 w_寬度 例如(w_200則表示寬度為200個像素的box)
2.Div 高度定義 h_高度 例如(h_300 則表示高度為300個像素的box)
3.Div邊框定義
a)屬性定義(常用有兩種 一種是實線solid,另一種是虛線 dashed)
i..bd_dashed{ border:dashed; }//將border屬性定義為虛線
ii..bd_solid{ border: solid; }//將border 屬性定義為實線b)邊框位置定義
i.bd_像素數 例如bd_1 代表border為1像素的邊框
ii.bd_top_像素數 例如 bd_top_1 代表上方border為1個像素的邊框;
iii.bd_left_像素數 例如 bd_left_1 代表左邊 border為1個像素的邊框
iv.bd_right_像素數 例如 bd_ right _1 代表右邊 border為1個像素的邊框
v.bd_bom_像素數 例如 bd_bom_1 代表底部 border為1個像素的邊框
c)邊框顏色定義
i.bd_顏色 例如 bd_ccc 代表顏色為CCC的邊框
d)例子應用 定義一個1個像素實線灰色邊框box
<div class=”bd_1 bd_ccc bd_solide”></div>
e)定義一個2像素 上方有邊框 且顏色為黑色的虛線box
<div class=”bd_top_2 bd_000 bd_deshed”></div>
f)使用說明:在這里我將border的屬性全部拆分了,可能你當前的項目不需要拆分這么細,更據項目適可而止.如果一個項目border 的屬性使用范圍不是太多,就可以不需要拆分太細.
4.Div內邊距屬性(Padding) 定義
a)Pd_像素 例如(pd_10則代表box的內邊距為10個像素)
b)Pd_left_像素 例如(pd_left_5則代表box的左方內邊距為5個像素)
c)Pd_top_像素 例如(pd_top_5則代表box的上方內邊距為5個像素)
d)Pd_right_像素 例如(pd_right_5則代表box的右方內邊距為5個像素)
e)Pd_bom_像素 例如(pd_bom_5則代表box的下方內邊距為5個像素)
5.Div外邊距屬性(margin) 定義
a)mg_像素 例如(mg_10則代表box的外邊距為10個像素)
b)mg_left_像素 例如(mg_left_5則代表box的左方外邊距為5個像素)
c)mg_top_像素 例如(mg_top_5則代表box的上方外邊距為5個像素)
d)mg_right_像素 例如(mg_right_5則代表box的右方外邊距為5個像素)
e)mg_bom_像素 例如(mg_bom_5則代表box的下方外邊距為5個像素)
6.浮動
a)Float_l代表向左浮動;
b)Float_r代表向右浮動
c)注意,一般我們都應該向左浮動,IE6對浮動兼容性很差,用外邊距分開兩個box的間隔.
7.文本行高定義
a)lh_20定義box內行高為20個像素例如(lh_20{ line-height:20px;});
8.隱藏box定義
a)Hidden (display:none;)
二、面向對象寫法操作
1.定義一個寬為300像素 高度為250像素 背景顏色為淺灰的box(使用面向對象的方式)
a)樣式定義:
.w_300{width;300px;}
.h_250{height:250px;}
.bg_ccc{background:#ccc;}b)html標簽:
<div class=”w_300 h_250 bg_ccc”></div>
2. 定義一個寬為300像素 高度為250像素 背景顏色為淺灰的box(使用常規的方式)
a)樣式定義:
.box{
width;300px;
height:250px;
background:#ccc;
}b)html標簽:
<div class=”box”></div>
比較:似乎看到了常規方式要比面向對象的方式要好.看起來簡單使用.接下來我們在做一件事,我們再新建一個box,寬度是400像素的.
常規方法:
a)樣式定義:
.box{
width;300px;
height:250px;
background:#ccc;
}
.box2{
width;400px;
height:250px;
background:#ccc;
}b)html標簽:
<div class=”box”></div> <div class=”box2”></div>
面向對象的方法:
a)樣式定義:
.w_300{width;300px;}
.w_400{width;400px;}
.h_250{height:250px;}
.bg_ccc{background:#ccc;}b)html標簽:
<div class=”w_300 h_250 bg_ccc”></div> <div class=”w_400 h_250 bg_ccc”></div>
總結:我們是不是在樣式上比常規的方法省掉了兩行的樣式.如果一個網站有成千上萬個div,那么我們是不是會省掉很多代碼.面向對象的方法使得我們的代碼重用了,提高了利用率.
3 接上面的例子,我們再給這個box加一個1像素實黑線邊框
常規方法:
a)樣式定義:
.box{
width;300px;
height:250px;
background:#ccc;
}
.box2{
width;400px;
height:250px;
background:#ccc;
border:1px #000 solid;
}b)html標簽:
<div class=”box”></div> <div class=”box2”></div>
面向對象的方法:
a)樣式定義:
.w_300{width;300px;}
.w_400{width;400px;}
.h_250{height:250px;}
.bg_ccc{background:#ccc;}
.bd_1{border:1px;}
.bd_000{border-color:#000;}
.bd_solid{border: solid; }b)html標簽:
<div class=”w_300 h_250 bg_ccc”></div> <div class=”w_400 h_250 bg_ccc bd_1 bd_000 bd_solid”></div>
總結:上面的例子讓你是不是感覺到了面向對象的方法有些不好了.比較繁瑣了,我覺得這樣寫沒錯誤.因為下一次我們還有可能使用到邊框為2個像素的,邊框顏色是其他顏色的.或者使用虛線.我說了這么多是不是又給面向對象的方法挽回了一些面子.但是要真么做,我們是不是又犯了教條主義錯誤.我覺得首先要做的是,看看整個網站里面使用其他顏色邊框或者虛線實線多么?如果多,這么些沒錯誤.但是一般來說一個網站是不會采用多于三種顏色的邊框.我們再按照面向對象的方法是不是增加了幾行代碼.如果不多,可以根據box所在位置,或者這個box需要做什么用的來起一個類名.例如:內容box需要邊框那么我們可以定義一個內容的邊框即 bd_con{border:1px #000 solid;}
再回來面向對象的方法:
a)樣式定義:
.w_300{width;300px;}
.w_400{width;400px;}
.h_250{height:250px;}
.bg_ccc{background:#ccc;}
.bd_con{border:1px #000 solid;}b)html標簽:
<div class=”w_300 h_250 bg_ccc”></div> <div class=”w_400 h_250 bg_ccc bd_con”></div>
這樣來寫,你還覺得它繁瑣么?是不是覺得好多了.
其實面向對象的思想基本也就這樣,只是我們要清楚什么時候該使用這個方法,什么時候該使用常規的方法,靈活的使用會使得代碼量減少,進而提升網站的性能.
4 樣式的規劃
a) 通常我們都會將樣式保存成一個文件.所有的頁面外部調用.
既然采用了面向對象的方法,我們就應該有一套新的保存方法:
--定義寬度--
.w_300{width：300px;}
.w_400{width：400px;}
.....所有定義寬度的樣式都寫在這里,排序按照像素從低到高.
--結束定義寬度--
--定義高度--
.h_250{height:250px;}
.h_300{height:300px;}
.h_350{height:350px;}所有定義高度的樣式都寫在這里,排序按照像素從低到高.
--結束定義高度--
--定義背景色--
.bg_ccc{background:#ccc;}
--結束定義背景色--
--定義邊框--
.bd_con{border:1px #000 solid;}
--結束定義邊框--以此類推,為什么要使用這個方法,當我們添加新類的時候我們可以馬上查看到目前的樣式中是不是已經存在了,如果存在,拿來即用.如果不存在,在相應的位置聲明.然后拿來用之.
轉載請在文章開頭和結尾顯眼處標注：作者、出處和鏈接。不按規范轉載侵權必究。
未經授權嚴禁轉載，授權事宜請聯系作者本人，侵權必究。
本文禁止轉載，侵權必究。
授權事宜請至數英微信公眾號(ID: digitaling) 后臺授權，侵權必究。
評論
評論
推薦評論
全部評論（17條）