CSS OOCSS简单介绍

快乐打工仔 分类:实例代码

OOCSS是(Object Oriented CSS),顾名思义就是面向对象的CSS。

OOCSS主要有两个原则:

(1).结构和样式分离:

比如一个页面存在着多个不同功能的按钮,这些按钮的形状大小都差不多,但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离,我们的CSS代码可能是这样的:

.btn-primary{
    width:100px;
    height:50px;
    padding:5px 3px;
    background:#ccc;
    color:#000;
}
.btn-delete{
    width:100px;
    height:50px;
    padding:5px 3px;
    background:red;
    color:#fff;
}

这两个或者可能更多的按钮拥有一些不同的样式,但是它们同时拥有相同的大小样式等,将其抽象的部分提取出来,如下:

.btn{
    width:100px;
    height:50px;
    padding:5px 3px;
}
.primary{
    background:red;
    color:#fff;
}
.delete{
    background:red;
    color:#fff;
}

这样提取公用的样式出来,然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外,还有一个好处是复用性,如果需要增加其他额外的按钮,只需要编写不同的样式,和btn配合使用即可。

(2)容器和内容分离:

我们平时写代码一定写过这样代码

.content h3{
  font-size:20px;
  color:#333;
}

这样的代码就是内容依赖于容器,没有分离的代码,也就是说h3的样式依赖于.content容器,如果其他地方要用到相同的样式,但是它的容器却不是.content,那你可能就是要再写一遍.something h3。

所以OOCSS推荐分离容器和内容,可以修改成:

.title{
  font-size:20px;
  color:#333;
}

关于这一点,个人建议要分情况来看,像前面这个例子,它适合样式和容器分离。但是比如下面这种情况:

.menu li{
  font-size:12px;
}

这种ul,li列表的样式,我觉的就按照我们原先的做法就可以,不一定非得给一个类给li来设定样式,如下:

.menu-item{
  font-size:12px;
}

这样页面的li标签需要引用menu-item类。

网站出售中,有意者加微信:javadudu

回复

我来回复
  • 暂无回复内容