2015-12-12复习之OO CSS
来源:互联网 发布:mac 普通鼠标左右 编辑:程序博客网 时间:2024/06/03 07:21
OOCSS的定义
OO(Object Oriented)面向对象
OO CSS将页面可重用元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例。
举个简单例子:
.p{ color:red; text-align:center;}<p class="p">hello world</p>
.red{color:red;}.alignCenter{text-align:center;}<p class="red alignCenter">hello world</p>
具体概念见:OOCSS——概念篇
OO CSS的作用
加强代码复用以方便维护
减小css体积
提升渲染效率
组件库思想、栅格布局可共用、减少选择器、方便扩展
OO CSS的注意事项
1、不要直接定义子节点,应该把共性声明放到父类
2、结构和皮肤相分离(class="containter"---->class=“containter simpleEXT”)
3、容器和内容相分离(<div class="c"><ul class="u"><li></li></ul></div> .c ul{}---->ul.u{})
4、抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面。
5、往你想要扩展的对象本身增加class而不是它的父节点。
6、对象应保持独立性。(<div class="d1"><div class="d2"></div></div>----><div class="d1 d2"></div>)
7、避免使用ID选择器,权重太高,无法使用。
8、避免位图相关的样式。
9、保证选择器相同的权重。
10、类名 简短 清晰 语义化 OOCSS的名字并不影响HTML语义化。
0 0
- 2015-12-12复习之OO CSS
- 2015-12-09复习之CSS(3)基础
- CSS基础复习之定位
- 2015-12-06复习之HTML基础
- 2015-12-13复习之CSS3选择器
- OO的CSS尝试
- OO的CSS尝试
- css复习
- Css复习
- CSS 复习
- CSS复习
- CSS复习
- 复习css
- 复习CSS
- css复习
- 2015-12-11复习之CSS3动画多列
- 2015-12-13复习之CSS3盒子样式
- 2015-12-13复习之CSS3 border 详解border-image
- zoj 1403
- 【相册】华为手机调用系统相册的问题
- Jsp实现文件上传(无依赖jar包)
- hdoj--2098--分拆素数和(水题)
- 返回到某个VC 的方法
- 2015-12-12复习之OO CSS
- 剑指offer系列之三十六:数字在排序数组中出现的次数
- android studio 乱码解决方法
- listview 中edittext无法调出输入框
- Unicode(UTF-8, UTF-16)令人混淆的概念
- 获取汉字首字母(php,java)
- 在linux下解决adb devices:???????? no permission
- C#多线程
- 通过自定义android键盘实现车牌号输入法