面向对象的样式表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条）