以下文章同步於Github。

程式碼連結
MVCSS
MVCSS中文翻譯

Components(組件)
具有辨識性的UI皆放在Components的Sass目錄裡面，
這些命名通常都會是抽象命名，
抽象命名的觀念其實和SMACSS的Layout Rules相似的。
這樣你才能確保你的模組能夠任意移動到各區塊去，
同時又不會造成語意上的混亂。

像以MVCSS裡面有提到一個範例，
g(Grid抽象命名)和card用來處理Layout與container，
同時裡面可以能夠包含許多模組：

<div class="g">
  <div class="g-box g-b--1of2">
    <div class="card">
      <!-- Content -->
    </div>
  </div>
  <div class="g-b g-b--1of2">
    <div class="card">
      <!-- Content -->
    </div>
  </div>
</div>

其他的Components像是thumb只會影響一個元素，
乍看之下跟tools的觀念很像，
兩者的差異是Components可以透過Bem的modifier的觀念來延伸樣式，但tools不行：

<div class="bucket">
  <div class="bucket-media">
    <img class="thumb thumb--m" src="avatar-nick.jpg" alt="Nick Walsh">
  </div>
  <div class="bucket-content">
    <p>Nick Walsh</p>
  </div>
</div>

Structures
Structures的觀念時常用在某些特定情境或內容類型，
在一些情境下，也會用在主題樣式或RWD響應式網站上。

有些開發者時常會將Component與Structure混淆，
所以MVCSS提出了三種辨別的方式來幫助我們在兩者間進行辨別：
1.作用範圍大小
2.依賴其他模組
3.專案間是否具有可移植性，或者是沒有
下面我們一一來進行解說。

1.作用範圍大小
當一個Module(模組)會影響一個元素或元素間的排列(譬如他的樣式範圍很廣泛)，
那就代表你處理的結構有很大的可能是Structure。

假如你正在設計一個相當常見的網站，
header表頭裡面左邊有logo，
再加上一些水平導覽列nav在右邊。
你可以使用一個Helpers、Components和 Tools 的組合來設計。

<header class="group">
    <img class="fl">
    <nav class="fr">
        <ul class="list list--inline">
            <li class="list-item"><a href="/">Home</a></li>
            <li class="list-item"><a href="/blog">Blog</a></li>
            <li class="list-item"><a href="/contact">Contact</a></li>
        </ul>
    </nav>
</header>

這樣的架構在PC版型上或許沒問題，
但假使我們要設計RWD響應式網頁的時候會發生什麼事？
在低螢幕解析度的行動裝置上，如果希望導覽列有這些功能：
1.填滿 viewport寬度
2.Stack links atop one another
3.使用交替色在列表背景上

在PC上我們的導覽列是水平的，
所以我們在ul上面使用了list--inline的設定，
但假使這個網站有RWD時，
導覽列自然會變成垂直從上到下的排版方式，
這樣他就不會是inline的排版了，
在語意越來越混亂時，就會導致開發上的困難。

在這樣的情況下，
最好的辦法就是創造一個新的結構(Structures)，
並且在裡面定義新的主題與RWD響應式清單模組。

2. 依賴其他模組
不像是Components，Structures可以依賴，甚至可使用擴充(extend),以及預先存在的Components，
這個方法在想要添加主題或行為到一個Component是非常有用的，
但也請記得要保持獨特得變化在裡面。
在MVCSS的架構，主要是使用g(Grid)的Component在網頁排版上，
並且嘗試保持簡單，但有些情況下會希望在更特別的模組引入既有的Component。
像下面的例子就是定義了一個collection的結構，
在nth-child(3n + 1)清除浮動，
增加該模組的Grid的變化性：

.collection

// -------------------------------------  
//   Modifiers
// -------------------------------------  

.collection--1of3

  .collection-item:nth-child(3n + 1)
    clear: left

// -------------------------------------  
//   Scaffolding  
// -------------------------------------  

// ----- Item ----- //  

.collection-item  
  margin-bottom: $b-space-l  

在上面有提到MVCSS是使用g(Grid)的Component來排版，
假設有一個HTML結構有用到collection的架構時，
就可以使用g (Grid) Component 和 collectionStructure來組合我們想要的樣式。

PS：使用過多的修飾符到grid和`grid-box會讓HTML結構變得難以閱讀，所以簡寫成g、g-b

<div class="g collection collection--1of3">
  <div class="g-b g-b--1of3 collection-item">
    <!-- Content -->
  </div>
  <div class="g-b g-b--1of3 collection-item">
    <!-- Content -->
  </div>
  <div class="g-b g-b--1of3 collection-item">
    <!-- Content -->
  </div>
  <div class="g-b g-b--1of3 collection-item">
    <!-- Content -->
  </div>
</div>

但這樣還是有太多類別在套用樣式，
要更加優化HTML結構的可讀性，
你可以使用@extend的指令。

.collection
  @extend .g

// -------------------------------------
//   Modifiers
// -------------------------------------

.collection--1of3
  @extend .g-b--1of3

  .collection-item:nth-child(3n + 1)
    clear: left

// -------------------------------------
//   Scaffolding
// -------------------------------------

// ----- Item ----- //

.collection-item
  @extend .g-b
  margin-bottom: $b-space-l

我們在Sass裡面繼承了g、g-b的Component，
同時再撰寫獨特的樣式在.collection-item裡面，
這樣HTML結構就能變得這麼漂亮了：

<div class="collection collection--1of3">
  <div class="collection-item">
    <!-- Content -->
  </div>
  <div class="collection-item">
    <!-- Content -->
  </div>
  <div class="collection-item">
    <!-- Content -->
  </div>
  <div class="collection-item">
    <!-- Content -->
  </div>
</div>

3. 專案間是否具有可移植性，或者是沒有
上面兩點的作用範圍大小和是否依賴其他模組都會影響可移植性，
當你在判斷你現在設計的CSS區塊與組件能夠隨意在各個區塊套用時，
那就代表他具有可移植性，你便能把他歸類為Component。
但另一方面如果在你在一個模組區塊上寫了一定數量的程式碼，
那就表示把該模組分類成Structure會更好一些。