CSS 团队规范参考

引子

想起刚工作不久的时候，自己想要明确一套规范，而不只是看到什么就是什么，但实际经验欠缺，就只是简单的了解了一下。现在又有这样的念头了，也有对应的素材，尝试着总结一下，看下能弄出什么样来。

• Origin
• My GitHub

CSS 方法论

谈到 CSS 就离不开 HTML，现在有不少关于阐释 HTML 和 CSS 之间关系的理论。了解这些，对于组织 CSS 很有帮助。下面通过网上的一些资料，介绍一些认可度比较高的方法论。

OOCSS 方法

全称是 Object-Oriented CSS，面向对象的 CSS。在 2008 年的时候就被提出，在 OOCSS wiki 介绍中，该方法有两个主要的原则：

1 分离结构和外观

意思是将视觉特性定义为可复用的单元（例如背景和边框样式）。换句话说，就是把布局和设计的样式都独立出来。见下面的例子：

<div class="warn">warning</div>

样式 warn 表示警告的字体颜色，在系统内，只要是用到警告的地方，统一使用这个样式。

2 分离容器和内容

意思是指把内容从容器中分离开来。不论你放到那里，看起来都是一样的。见下面的例子：

<div class="dialog blue">
  <div class=“dialog-title”><span class="text">Title</span></div>
  <div class="dialog-content show"><span class="text">content</span></div>
</div>

这个例子中不同的模块显示不同的字体和颜色，一般可能会这样做：

.dialog-title .text {
   color: #333;}
.dialog-content .text {
   color: #666;}

但在 OOCSS 方法中是通过添加一个新的 class 来描述需要的样式：

<div class="dialog blue">
  <div class=“dialog-title”><span class="text title-text">Title</span></div>
  <div class="dialog-content show"><span class="text content-text">content</span></div>
</div>

.title-text {
   color: #333;}
.content-text {
   color: #666;}

当想提供一套组件让开发人员组合起来创建用户界面时，这种方法非常有用。B