面向对象的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
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· 你所不知道的 C/C++ 宏知识
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· SQL Server 内存占用高分析
· 盘点!HelloGitHub 年度热门开源项目
· DeepSeek V3 两周使用总结
· 02现代计算机视觉入门之:什么是视频
· C#使用yield关键字提升迭代性能与效率
· 回顾我的软件开发经历(1)