面向对象的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的使用实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
/*
    未运用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 @   前端路上的小兵  阅读(477)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
阅读排行:
· 盘点!HelloGitHub 年度热门开源项目
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· C#使用yield关键字提升迭代性能与效率
· 回顾我的软件开发经历(1)
点击右上角即可分享
微信分享提示