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

 

posted @ 2018-07-19 22:35  前端路上的小兵  阅读(236)  评论(0编辑  收藏