这样的写法，一来效能理论上比较好（我没办法验证），二来层次比较单纯。
增加 CSS class 的重复使用

在 OOCSS 的观念中，强调重复使用 class，而应该避免使用 id 作为 CSS 的选择器。这种想法就是像
OOP
尽量抽离重复的程式码，例如以下这个例子，这是两种按钮的 CSS 样式属性：
 

CSS Code复制内容到剪贴板

1. .button {   

2.   display: inline-block;   

3.   padding: 6px 12px;   

4.   color: hsla(0, 100%, 100%, 1);   

5.   &.button-default { background: hsla(180, 1%, 28%, 1); }   

6.   &.button-primary { background: hsla(208, 56%, 53%, 1); }   

7. }   

上面的 CSS 将两种不同样式的 button，抽离出重复的部份，并且定义在同个 class
上。因此，要使用这样的样式，HTML 的写法可能长这个样子：
 

CSS Code复制内容到剪贴板

先用 button 宣告此为一个按钮的样式，再用 button-default 或 button-primary 作为按钮底色的区别。这么做可以维护成本变得比较低，例如：想要改网站上所有按钮的大小，就只要修改 .button 的 padding 而已。
SMACSS

我对 SMACSS 的理解还不是很深入，或许把 Scalable and Modular Architecture for CSS 看完后会有更深一曾的理解。目前对 SMACSS 的概念仅限于它对 CSS 不同的业务逻辑所做的划分方式：

但我认为原本的设计不是很妥当，因此我自己做了一些改良：
Base

Base 就是设定标签元素的预设值，例如浏览器的 reset 可以写在这里，如果用的是 Compass，只要 @include global-reset 即可。这里只会对标签元素本身做设定，不会出现任何 class 或
id，但是可以有属性选择器或是伪类：
 

CSS Code复制内容到剪贴板

1. html {}   

2. input[type=text] {}   

3. a:hover {}   

Layout     

Layout 是指整个网站的「大架构」的外观，而非 .button 这种小元件的 class。网站通常会有一些主要的大区块，可能是 header 或 footer，Layout 就是用来定义这些「大架构」的 CSS。如果有做 Responsive Web Design 或是用 Grid System，也是把规则写在 Layout 这里。

以下这是个范例：
 

CSS Code复制内容到剪贴板

1. #header { margin: 30px 0; }   

2. #articles-wrapper { ......; }   

3. .sidebar {   

4.   &.sidebar--rightright { ......; }   

5.   &.sidebar-left { ......; }   

6. }  

通常只有一个选择器，一个 id、或一个 class。
Module

原本的 SMACSS 对 Module 的设计我觉得不是很好，所以我硬是将 Module
拆分出一个 Partial。

这里的 Module 顾名思义，就是可以在其他地方被重复使用，如果要找更明确的例子，我想就像 Twitter Bootstrap 的Components
一样，或者像前面 OOCSS 所举例的 .button 这种会被重复使用的元件模组。

模组不需要用任何的 prefix，因为 Module 就是设计来可以重复应用在不同的 page 上。
Partial

Partial 跟 Latout 不同，也跟 Module 不同，他比 Layout 的范围小，可能是
header 底下的某个子元素。他不像 Module，他是特定单一领域下特别的设定。

CSS Code复制内容到剪贴板

1. .nav--main {   

2.   a { ......; }   

3. }  

通常会将 Partial 的名称加在子 class 作为 prefix，例如 .nav--main 底下的
.nav--main_item。至于为什么要用这么奇怪的命名方式？这等等在 CSS 规范部分会说明介绍。
State

State 负责定义元素不同的状态下，所呈现的样式。但是并非指一个元素的 :hover 或 :active 下的状态。举例来说，一个导航栏分页，目前所在页面的分页需要加上 .active
的属性表示目前位置是在这个分页，HTML 会长这样：

CSS Code复制内容到剪贴板