面向对象的CSS

原文

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

大纲

　　1、面向对象的CSS(OOCSS)概念
　　2、面向对象的CSS的作用
　　3、面向对象的CSS的注意事项
　　4、面向对象的CSS的使用实例

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

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

2、面向对象的CSS的作用

　　1、加强代码复用以便方便维护
　　2、减少CSS体积
　　3、提升渲染效率
　　4、组件库思想、栅格布局可共用、减少选择器、方便扩展
　　5、面向对象的CSS最大的好处是可以随时进行相关内容的扩展和重写

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

　　1、不要直接定义子节点，应把共性声明放到父类（这样只是具有共性声明的就可以省略了）
　　2、结构和皮肤相分离（定义结构的和定义颜色的分开修饰）（这样做的好处是之后对网页的修改的时候，可以保持网页的布局不动，而只是起到换肤的作用）
　　3、容器和内容相分离
　　4、抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装成页面
　　5、往你想要扩展的对象本身增加class而不是他的父节点
　　6、对象应保持独立性
　　7、避免使用ID选择器，权重太高，无法重用（ID一般是为了JS服务的）
　　8、避免位置相关的样式
　　9、保证选择器相同的权重
　　10、类名简短清晰语义化,OOCSS的名字并不影响HTML语义化

4、面向对象的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