首页 > 代码库 > OOCSS入门学习
OOCSS入门学习
对于面向对象大家肯定都有多多少少的了解,这里所说的OOCSS就是说面向对象的CSS,得说明的是OOCSS并不是一门新语言也不是什么库,而是一种概念和javascript面向对象一样。
可能你这样写过CSS代码
#box>.item{
margin:10px;
float:left;
text-align:center;
}
但如果另外一处的HTML结构和这个一模一样,那你是不是又得写一次css代码,这些多少有些不合理。
其实我们完全可以解决这个问题,如果我们写成这样。
.item{
margin:10px;
float:left;
text-align:center;
}
是不是下次直接复制一下class就可以了,这样多简单。
当然这只是其中的一个问题,有时我们并没有那么幸运,往往HTML结构都不会一模一样,但是很多情况下都差不多,只是一部分太个性,但也不是没有办法的,我们可以这样。
//公共
.item{
margin:10px;
float:left;
}//1
.set{
color:red;
text-align:center;
}//2
.unset{
color:blue;
}
如果你对面向对象编程熟悉的话,我相信你很快就理解了。
有时我们还会缩小到更细的颗粒,我相信你已经使用过了。
.t_red_color{color:red;}
.t_blue_color{color:blue;}
有时定义全局CSS很有必要,一个网站往往都是主调色啥的都是统一的,定义全局,如果下次想换颜色也方便,如果不单独提取出来,维护可想而知。
当然这里你可以把名字起的更好一些。
OOCSS入门学习