00、模块化CSS理论——OOCSS目录

OOCSS(Object-Oriented CSS,GithubFAQ),面向对象的CSS,典型案例是BootStrap,toggle组件的示例如下:

1
2
3
4
5
6
7
<div class="toggle simple">
<div class="toggle-control open">
<h1 class="toggle-title">Title 1</h1>
</div>
<div class="toggle-details open">...</div>
...
</div>

主要原则有以下两个:

  1. 分离结构和外观:意味着将视觉特性定义为可复用的单元,如上例中toggletoggle-controltoggle-titletoggle-detail4个类是结构类,simple是外观类。
  2. 分离容器和内容:指的是不再将元素位置作为样式的限定词,如上例中toggletoggle-controltoggle-titletoggle-detail4个类。

资料翻译列表

  1. 面向对象的CSS(Object Oriented CSS)
  2. 模板(Template)
  3. 网格(grids)
  4. 标准模块格式(Standard Module Format)
  5. 模块(Modules)
  6. 模块的表现形式(Module Skins)
  7. 内容(Content)
  8. 按钮(Buttons)
  9. 谈话框(Talk Bubbles)
  10. 滚动栏(Carousel)
  11. UML
  12. 分级浏览器支持(Graded Browser Support)
  13. 常见问题(FAQ)