OOCSS 基础介绍 DAY39

OOCSS 也是一种设计模式
它强调两点

在我们介绍 容器与内容分离 之前
我们时常在写css的时候会

.header a{    display: inline-block;    width: 100px;    height: 100px;}

那这样会有什么缺点
缺点就是会被div侷限住
没办法放到其他地方去

所以如果是独立的内容
应该是要弄成一个独立的名称
这就是 容器与内容分离

这里有 Bootstrap的格线系统(不懂得话 可以留言让我知道)

这里举 pagination(分页) 为例子
会发现
它可以放在 col-md-9里面
也可以放在 col-md-3里面

OOCSS 容器与内容分离(格线系统)
https://960.gs/demo.html
这里我们必须让格线系统保持乾净
不能将内容绑死在格线系统上
如下图:

.container_12 .grid_1 a{    display: inline-block;}

而是要将内容独立出来

//容器.container_12 .grid_1 {    }//内容.btn{    color: #000;}

结构与样式分离

在我们还没学结构与样式分离之前
都会这样写css

.button{    width: 50px;    height: 50px;    color: #fff;    background-color: #000;}

但我们应该把它的样式抽离出来

//结构.btn{    width: 50px;    height: 50px;}//样式.btn-primary{    color: #fff;    background-color: #000;}

会发现很像 Bootstrap 的元件写法

额外提醒:

工具类的样式也可以去分离
如 清除浮动(clearfix)

那今天的 OOCSS就介绍到这里啦
明天将介绍命名(命名真的很头疼)
若有任何问题 或 内容有误
都可以跟我说唷~~