面向?qū)ο蟮臉邮奖鞳OCSS(Object Oriented Cascading Style Sheet)
一、命名規(guī)范
a)Div+css 命名規(guī)范
i.標(biāo)簽定義 (全局)
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個(gè)像素的box)
2.Div 高度定義 h_高度 例如(h_300 則表示高度為300個(gè)像素的box)
3.Div邊框定義
a)屬性定義(常用有兩種 一種是實(shí)線solid,另一種是虛線 dashed)
i..bd_dashed{ border:dashed; }//將border屬性定義為虛線
ii..bd_solid{ border: solid; }//將border 屬性定義為實(shí)線b)邊框位置定義
i.bd_像素?cái)?shù) 例如bd_1 代表border為1像素的邊框
ii.bd_top_像素?cái)?shù) 例如 bd_top_1 代表上方border為1個(gè)像素的邊框;
iii.bd_left_像素?cái)?shù) 例如 bd_left_1 代表左邊 border為1個(gè)像素的邊框
iv.bd_right_像素?cái)?shù) 例如 bd_ right _1 代表右邊 border為1個(gè)像素的邊框
v.bd_bom_像素?cái)?shù) 例如 bd_bom_1 代表底部 border為1個(gè)像素的邊框
c)邊框顏色定義
i.bd_顏色 例如 bd_ccc 代表顏色為CCC的邊框
d)例子應(yīng)用 定義一個(gè)1個(gè)像素實(shí)線灰色邊框box
<div class=”bd_1 bd_ccc bd_solide”></div>
e)定義一個(gè)2像素 上方有邊框 且顏色為黑色的虛線box
<div class=”bd_top_2 bd_000 bd_deshed”></div>
f)使用說(shuō)明:在這里我將border的屬性全部拆分了,可能你當(dāng)前的項(xiàng)目不需要拆分這么細(xì),更據(jù)項(xiàng)目適可而止.如果一個(gè)項(xiàng)目border 的屬性使用范圍不是太多,就可以不需要拆分太細(xì).
4.Div內(nèi)邊距屬性(Padding) 定義
a)Pd_像素 例如(pd_10則代表box的內(nèi)邊距為10個(gè)像素)
b)Pd_left_像素 例如(pd_left_5則代表box的左方內(nèi)邊距為5個(gè)像素)
c)Pd_top_像素 例如(pd_top_5則代表box的上方內(nèi)邊距為5個(gè)像素)
d)Pd_right_像素 例如(pd_right_5則代表box的右方內(nèi)邊距為5個(gè)像素)
e)Pd_bom_像素 例如(pd_bom_5則代表box的下方內(nèi)邊距為5個(gè)像素)
5.Div外邊距屬性(margin) 定義
a)mg_像素 例如(mg_10則代表box的外邊距為10個(gè)像素)
b)mg_left_像素 例如(mg_left_5則代表box的左方外邊距為5個(gè)像素)
c)mg_top_像素 例如(mg_top_5則代表box的上方外邊距為5個(gè)像素)
d)mg_right_像素 例如(mg_right_5則代表box的右方外邊距為5個(gè)像素)
e)mg_bom_像素 例如(mg_bom_5則代表box的下方外邊距為5個(gè)像素)
6.浮動(dòng)
a)Float_l代表向左浮動(dòng);
b)Float_r代表向右浮動(dòng)
c)注意,一般我們都應(yīng)該向左浮動(dòng),IE6對(duì)浮動(dòng)兼容性很差,用外邊距分開(kāi)兩個(gè)box的間隔.
7.文本行高定義
a)lh_20定義box內(nèi)行高為20個(gè)像素例如(lh_20{ line-height:20px;});
8.隱藏box定義
a)Hidden (display:none;)
二、面向?qū)ο髮?xiě)法操作
1.定義一個(gè)寬為300像素 高度為250像素 背景顏色為淺灰的box(使用面向?qū)ο蟮姆绞?
a)樣式定義:
.w_300{width;300px;}
.h_250{height:250px;}
.bg_ccc{background:#ccc;}b)html標(biāo)簽:
<div class=”w_300 h_250 bg_ccc”></div>
2. 定義一個(gè)寬為300像素 高度為250像素 背景顏色為淺灰的box(使用常規(guī)的方式)
a)樣式定義:
.box{
width;300px;
height:250px;
background:#ccc;
}b)html標(biāo)簽:
<div class=”box”></div>
比較:似乎看到了常規(guī)方式要比面向?qū)ο蟮姆绞揭?看起來(lái)簡(jiǎn)單使用.接下來(lái)我們?cè)谧鲆患?我們?cè)傩陆ㄒ粋€(gè)box,寬度是400像素的.
常規(guī)方法:
a)樣式定義:
.box{
width;300px;
height:250px;
background:#ccc;
}
.box2{
width;400px;
height:250px;
background:#ccc;
}b)html標(biāo)簽:
<div class=”box”></div> <div class=”box2”></div>
面向?qū)ο蟮姆椒?
a)樣式定義:
.w_300{width;300px;}
.w_400{width;400px;}
.h_250{height:250px;}
.bg_ccc{background:#ccc;}b)html標(biāo)簽:
<div class=”w_300 h_250 bg_ccc”></div> <div class=”w_400 h_250 bg_ccc”></div>
總結(jié):我們是不是在樣式上比常規(guī)的方法省掉了兩行的樣式.如果一個(gè)網(wǎng)站有成千上萬(wàn)個(gè)div,那么我們是不是會(huì)省掉很多代碼.面向?qū)ο蟮姆椒ㄊ沟梦覀兊拇a重用了,提高了利用率.
3 接上面的例子,我們?cè)俳o這個(gè)box加一個(gè)1像素實(shí)黑線邊框
常規(guī)方法:
a)樣式定義:
.box{
width;300px;
height:250px;
background:#ccc;
}
.box2{
width;400px;
height:250px;
background:#ccc;
border:1px #000 solid;
}b)html標(biāo)簽:
<div class=”box”></div> <div class=”box2”></div>
面向?qū)ο蟮姆椒?
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標(biāo)簽:
<div class=”w_300 h_250 bg_ccc”></div> <div class=”w_400 h_250 bg_ccc bd_1 bd_000 bd_solid”></div>
總結(jié):上面的例子讓你是不是感覺(jué)到了面向?qū)ο蟮姆椒ㄓ行┎缓昧?比較繁瑣了,我覺(jué)得這樣寫(xiě)沒(méi)錯(cuò)誤.因?yàn)橄乱淮挝覀冞€有可能使用到邊框?yàn)?個(gè)像素的,邊框顏色是其他顏色的.或者使用虛線.我說(shuō)了這么多是不是又給面向?qū)ο蟮姆椒ㄍ旎亓艘恍┟孀?但是要真么做,我們是不是又犯了教條主義錯(cuò)誤.我覺(jué)得首先要做的是,看看整個(gè)網(wǎng)站里面使用其他顏色邊框或者虛線實(shí)線多么?如果多,這么些沒(méi)錯(cuò)誤.但是一般來(lái)說(shuō)一個(gè)網(wǎng)站是不會(huì)采用多于三種顏色的邊框.我們?cè)侔凑彰嫦驅(qū)ο蟮姆椒ㄊ遣皇窃黾恿藥仔写a.如果不多,可以根據(jù)box所在位置,或者這個(gè)box需要做什么用的來(lái)起一個(gè)類名.例如:內(nèi)容box需要邊框那么我們可以定義一個(gè)內(nèi)容的邊框即 bd_con{border:1px #000 solid;}
再回來(lái)面向?qū)ο蟮姆椒?
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標(biāo)簽:
<div class=”w_300 h_250 bg_ccc”></div> <div class=”w_400 h_250 bg_ccc bd_con”></div>
這樣來(lái)寫(xiě),你還覺(jué)得它繁瑣么?是不是覺(jué)得好多了.
其實(shí)面向?qū)ο蟮乃枷牖疽簿瓦@樣,只是我們要清楚什么時(shí)候該使用這個(gè)方法,什么時(shí)候該使用常規(guī)的方法,靈活的使用會(huì)使得代碼量減少,進(jìn)而提升網(wǎng)站的性能.
4 樣式的規(guī)劃
a) 通常我們都會(huì)將樣式保存成一個(gè)文件.所有的頁(yè)面外部調(diào)用.
既然采用了面向?qū)ο蟮姆椒?我們就應(yīng)該有一套新的保存方法:
--定義寬度--
.w_300{width：300px;}
.w_400{width：400px;}
.....所有定義寬度的樣式都寫(xiě)在這里,排序按照像素從低到高.
--結(jié)束定義寬度--
--定義高度--
.h_250{height:250px;}
.h_300{height:300px;}
.h_350{height:350px;}所有定義高度的樣式都寫(xiě)在這里,排序按照像素從低到高.
--結(jié)束定義高度--
--定義背景色--
.bg_ccc{background:#ccc;}
--結(jié)束定義背景色--
--定義邊框--
.bd_con{border:1px #000 solid;}
--結(jié)束定義邊框--以此類推,為什么要使用這個(gè)方法,當(dāng)我們添加新類的時(shí)候我們可以馬上查看到目前的樣式中是不是已經(jīng)存在了,如果存在,拿來(lái)即用.如果不存在,在相應(yīng)的位置聲明.然后拿來(lái)用之.
轉(zhuǎn)載請(qǐng)?jiān)谖恼麻_(kāi)頭和結(jié)尾顯眼處標(biāo)注：作者、出處和鏈接。不按規(guī)范轉(zhuǎn)載侵權(quán)必究。
未經(jīng)授權(quán)嚴(yán)禁轉(zhuǎn)載，授權(quán)事宜請(qǐng)聯(lián)系作者本人，侵權(quán)必究。
本文禁止轉(zhuǎn)載，侵權(quán)必究。
授權(quán)事宜請(qǐng)至數(shù)英微信公眾號(hào)(ID: digitaling) 后臺(tái)授權(quán)，侵權(quán)必究。
評(píng)論
評(píng)論
推薦評(píng)論
全部評(píng)論（17條）