面向对象的CSS

原文

　　简书原文：https://www.jianshu.com/p/cb5e9f56ddcc

大纲

　　一、面向对象的CSS(OOCSS)概念
　　二、面向对象的CSS的做用
　　三、面向对象的CSS的注意事项
　　四、面向对象的CSS的使用实例

一、面向对象的CSS(OOCSS)概念

　　面向对象的CSS将页面可重用元素抽象成一个类，用Class加以描述，而与其对应的HTML便可当作是此类的一个实例。
　　面向对象的CSS的出现是由于当存在大型项目的时候，会有不少的CSS样式出现，这样就会不少的CSS样式代码存在，为了让这些代码更加的简洁，就出现了面向对象的CSS。

二、面向对象的CSS的做用

　　一、增强代码复用以便方便维护
　　二、减小CSS体积
　　三、提高渲染效率
　　四、组件库思想、栅格布局可共用、减小选择器、方便扩展
　　五、面向对象的CSS最大的好处是能够随时进行相关内容的扩展和重写

三、面向对象的CSS的注意事项

　　一、不要直接定义子节点，应把共性声明放到父类（这样只是具备共性声明的就能够省略了）
　　二、结构和皮肤相分离（定义结构的和定义颜色的分开修饰）（这样作的好处是以后对网页的修改的时候，能够保持网页的布局不动，而只是起到换肤的做用）
　　三、容器和内容相分离
　　四、抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装成页面
　　五、往你想要扩展的对象自己增长class而不是他的父节点
　　六、对象应保持独立性
　　七、避免使用ID选择器，权重过高，没法重用（ID通常是为了JS服务的）
　　八、避免位置相关的样式
　　九、保证选择器相同的权重
　　十、类名简短清晰语义化,OOCSS的名字并不影响HTML语义化

四、面向对象的CSS的使用实例

/*
    未运用OOCSS的思想前的代码
*/
#button {
  width: 200px;
  height: 50px;
  padding: 10px;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#box {
  width: 400px;
  overflow: hidden;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

#widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
/*
    使用OOCSS以后的代码：将skin抽出
*/
.button {
  width: 200px;
  height: 50px;
}

.box {
  width: 400px;
  overflow: hidden;
}

.widget {
  width: 500px;
  min-height: 200px;
  overflow: auto;
}

.skin {
  border: solid 1px #ccc;
  background: linear-gradient(#ccc, #222);
  box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}

参考网址

https://www.w3cplus.com/css/an-introduction-to-object-oriented-css-oocss.html
http://www.w3cplus.com/css/oocss-concept
http://www.w3cplus.com/css/oocss-core