以下文章同步於Github。

程式碼連結
MVCSS
MVCSS中文翻譯

進入主題
MVCSS融合了SMACSS、OOCSS、BEM的設計模式，
同時有參考了Foundation、Bootstrap、SUIT、inuit.css的framework，
所以在你要瀏覽MVCSS的設計模式時，
建議先回頭將SMACSS、OOCSS、BEM的觀念先弄清楚，
再來讀MVCSS比較不會有障礙，因為文件內容時常會提到它有些結構有參考某個設計模式，

這個章節主要是來講styleguide的部份，
你可以搭配上面連結的文件來做延伸閱讀，
而我這裡則會針對他每個細節來做更進一步的解說。

樣式表（Style Sheets）
MVCSS的程式碼範例都是使用Sass，
所以如果你是SCSS開發者的話，有些細節可能要注意一下。
例如要命名一個Mixin，在Scss上是@mixin bg(){}，
Sass只要這樣寫=bg(){}即可。

Style Sheets
MVCSS有一套基本的撰寫SASS的風格參考：
CSS依照字母來排序
如果有依照這樣來排列CSS設定，
較容易找得到自己想要找得程式碼，
除了MVCSS外，其他很多設計模式也建議這樣子做，
這個部分見仁見智，我自己沒有遵守：

//沒有依照字母排列
.box{
    zoom: 1;
    position: relative;
    font-size: 13px;
    color: #000;
    line-height: 1.5;
    background: url(../img.png);
    letter-spacing: 1pt;
}
//有依照字母排列
.box{
    background: url(../img.png);
    color: #000;
    font-size: 13px;
    letter-spacing: 1pt;
    line-height: 1.5;
    position: relative;
    zoom: 1;
}

Extends和Mixins建議放在CSS設定前面
除了Extends和Mixins外，
有用到Sass功能的建議都放在最前面，
可讀性會比較高

//mixin和extend混在CSS設定裡面，較不好閱讀
.box{
    zoom: 1;
    @include bg();
    position: relative;
    font-size: 13px;
    color: #000;
    @include hide-text();
    line-height: 1.5;
    background: url(../img.png);
    letter-spacing: 1pt;
    @extend g-1of3;
}
//Extends和Mixins放在CSS設定前面
.box{
    @include bg();
    @include hide-text();
    @extend g-1of3;
    background: url(../img.png);
    color: #000;
    font-size: 13px;
    letter-spacing: 1pt;
    line-height: 1.5;
    position: relative;
    zoom: 1;
}

使用兩個空格縮排
使用Tab在一些編輯器和編譯軟體上容易遇到問題，
用空白問題較少，
這裡也補充一些使用Sass格式需要注意的問題。

1. 一個Sass檔案裡面不能同時存在T ab與空白縮排，會導致編譯錯誤
2. 在import Sass檔案時，允許一個檔案是Tab，另外一個檔案是空白縮排

在 : 之後添加一個空格

//有些有空白有些沒有，導致文件瀏覽不易
.box{
    color:#fff;
    background: #000;
    line-hieght:1.5;
    text-align: center
}
//一致性都有留白
.box{
    color: #fff;
    background: #000;
    line-hieght: 1.5;
    text-align: center
}

在註解 // 之後添加一個空格
在值中的逗號之後添加一個空格（如 rgba(#000, 0.5)）
這兩點也是同上，為得是建立好規則，
以便團隊在設計程式碼上比較一致乾淨。

堅持使用class來設計樣式，不用ID
這部份和SMACSS的Module Rules理念相同，
如果是被設計成模組的區塊，
由於ID只能一個在網頁上，不能多處都放相同ID，
假使有個模組要顯示多個在網頁上時，那就必須重新設計了，
所以才會建議使用class來撰寫CSS樣式，
但並不代表全部都不能使用ID，
如果你確定該元素或區塊在各頁面上確實只會顯示一處時，
那就可以使用ID，例如Laout區塊。

盡可能限制巢狀結構
(待補充)

標記（Markup）
1.需依照Component、Structure、Tool、state、、context來排列class。
2.每個模式如果有修飾符（modifier classes），就必須連接在模組class後面。
這裡如果看不懂沒關係，等到後面一一介紹Component、Structure等功能再回頭看相信便能一目了然。

<div class="g collection collection--1of3 bch mtl tci is-active has-dropdown"></div>

數值規範數字遊戲(Styleguide - The Numbers Game)
預設的文字單位是使用px，並設定在config的HTML tag上
行距是沒有單位的，例如1.8
padding、margin是已預設文大小的倍數，使用em來設定
字體大小除了html的tag外，其他都是使用%的單位來設定
這裡補充一下，
我自己是沒有follow這樣的設定，
所有的文字設定與大小與行距都還是用px，
原因是我有用Compass的Compass Vertical Rhythm ，
這裡還是要強調一點，
設計模式並非要全然參考，
有些時候是你技術未到位，觀念無法掌握，
有得時候是你已經有自己的方法處理此細節，
所以取其優點讓自己的撰寫習慣變得更加漂亮即可。

註解寫法
依照模組的權重來寫註解：

// *************************************  
//
//   第一階  
//   -> 描述  
//
// *************************************    

// -------------------------------------  
//   第二階  
// -------------------------------------  

// ----- 第三階 ----- //  

// 第四階  

命名習慣
請參考此譯者的翻譯連結。