There are two main principles [in object-oriented CSS]: the first is to separate the structure from the skin and the second is to separate the container from the content.

• 结构 和 样式 分开
• 内容 和 容器 分开

oocss 是思想，而不是什么具体的模板、框架之类，目的就是 code reuse and, ultimately, faster and more efficient （重用、ultimately、快速和高效）

规则

• Avoid the descendent selector (i.e. don’t use .sidebar h3) 少用 descendent 选择器
• Avoid IDs as styling hooks 少用id
• Avoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title) 少用标签+class
• Except in some rare cases, avoid using !important 少用 !important
• Use CSS Lint to check your CSS (and know that it has options and method to its madness) 用 CSS Lint 检查一下
• Use CSS grids 使用 grid 布局

最佳实践

不好的代码：

<div class=”size1of4”></div>
<style>
.size1of4 {
background: blue;
border: 1px solid #ccc;
margin: 5px 10px 10px;
width: 25%;
}
</style>

好的代码：

<div class="size1of4 bgBlue solidGray mts mlm mrm mbm"></div>
<style>
.size1of4 {width: 25%;}
.bgBlue {background:blue}
.solidGray {border: 1px solid #ccc}
.mts {margin-top: 5px}
.mrm {margin-right: 10px}
.mbm {margin-bottom: 10px}
.mlm {margin-left: 10px}
</style>

各司其职，以后可以复用。并且命名也比较 sematic。

小结：oocss 简单了说，就是狂用 有语义（semantic）的class，避免层叠。特殊元素 用id就优先了。（都拆成零件了，能不复用嘛！其实，拆，没错，拆到什么程度，您自己评估）

下载 oocss

感觉可以作为自己 前端框架 的基点。

grids_all.html

• line 类似于 bootstrap 的 row
• unit 块
• sizeXofY 类似于 bootstrap 的 span-
• lastUnit 有点意思，不用写 div class=”clear” 了。
• 使用百分比（类似bootstrap比960gs强）

library.html

reset 和 fonts

content.css

包括 Default spacing,Elements,Headings,links,Lists,Tables,blockquote 等部分

oocss wiki 笔记

一个 module 代码

<div class="mod">
      <div class="inner">
              <div class="hd">Block Head</div>
              <div class="bd">Block Body</div>
              <div class="ft">Block Foot</div>
      </div>
</div>

How does OOCSS improve performance oocss 如何提升性能

1. Heavy reuse of CSS code, so less CSS code needed, which means: 重用导致 css 写的少
   • Smaller files, hence faster transfers css 文件小
   • A bigger percentage of the CSS code needed on most pages of your site is likely to be reused and possibly cached by the browser
     重用，甚至被缓存

2. To a lesser degree, fewer repaints and layout calculations on the part of the browser.
   On a single page, the more CSS rules are reused, the less time the rendering engine spends calculating “computed values” 浏览器计算时间更少

   好吧，我承认 class 的执行速度比那些乱78糟的选择器的确快很多。但 css之所以叫 层叠式(cascaded style sheet)样式表，cascaded 没了，那种 NB 如正则的匹配能力不也就丧失了嘛。刚从 html4 混乱的 html+style+js 中走向 sematic，这下子 class role 又热闹了。个人观点 by guoshuang

少用 id。1.css级别高；2.单一页面出现一样的id，不专业。：）

（作者的）一个月拿下前端技术

Week 1: They learned about semantics and built html from existing CSS. Learning to build new pages without writing more CSS, HTML syntax, multiple classes, validation, semantics, intro to code review, etc.

学习语义，学习用 oocss 现有的规则搭建 html 页面

Week 2: They built simple content objects (headings, lists, etc) for a week. Learning CSS syntax, how to extend objects, colors, % sizes for text, etc.

练习 headings, lists 等，学习 css 本身，以及如何扩展 对象、颜色、文字大小等

Week 3: they were building block skins. Borders, colors, background images, basic positioning, sprites. They worked with an amazing senior developer who answered a ton of questions and really helped them scale the learning curve. He also happens to be a very talented code reviewer.

折腾 block，边框、颜色、背景图片、定位、小组件。让一个前辈答疑解惑

Week 4: they were productive members of my team building skins that were production ready.

出炉。

好吧，一个蓝领程序员闪亮登场了－by guoshuang

如何开始？

从 template.htm 开始

如何命名

Brevity 短小
Clarity 明确
Semantic 语义
Generic 通用

慎用 继承（descendant）

descendant selectors are not discouraged, but putting them too high in the DOM tree is