面向对象的CSS样式

   OOCSS:面向对象的CSS样式,通过对CSS样式的合理规范,重复使用,达到代码的精简,便于换肤。

作用:

1
2
3
4
1. 加强代码复用以便方便维护
1. 减少CSS体积
1. 提升渲染效率
1. 组件库思想、栅格布局可共用、减少选择器、方便扩展

注意事项:

1
2
3
4
5
6
7
8
9
10
11
12
13
1. 不要直接定义子节点,应把共性声明放到父类

.mod .inner{} //

1. 结构和皮肤相分离
1. 容器和内容相分离
1. 抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面
1. 往你想要扩展的对象本身添加Class,而不是他的父节点
1. 对象应保持独立性
1. 避免使用ID选择器,权重太高,无法重用
1. 避免位置相关的样式
1. 保证选择器相同的权重
1. 类名:简短、清晰、语义化、OOCSS的名字并不影响HTML语义化

拓展

OOCSS

Reset

优点:样式初始化设置非常全面
缺点:设置了部分多余的设置,border

Normalize

优点:
缺点:有些默认的没有设置

Neat.css

优点:

  1. 解决Bug,低级浏览器常见Bug
  2. 统一效果,但不盲目追求重置为0
  3. 向后兼容
  4. 考虑响应式
  5. 考虑移动设备

缺点:

文章目录
  1. 1. 作用:
  2. 2. 注意事项:
  3. 3. 拓展
,