2014-01-09 25 views
3

我目前正在試圖消化本文由尼古拉斯·加拉格爾:About HTML semantics and front-end architecture瞭解單/多類模式

我努力理解標題「的‘多級’模式」根據本款...

我發現它是一個更具可擴展性的模式。例如,採用基本btn組件並添加另外5種類型的按鈕和3個額外的尺寸。使用「多類」模式,最終可以混合和匹配9個類。使用「單班」模式,你最終會有24班。

當他說走BTN成分,並添加按鈕的另外5種,他確實意味着作爲獨立的課程,如BTN-危險BTN-主要等,如果以何種上下文是3個額外的大小?

如果有人能夠解釋他如何使用「多等級」模式到達9班,使用「單班」模式到達24班,這將非常有幫助。

對不起,如果我錯過了這裏明顯的東西或未能掌握一個簡單的概念。

感謝您的幫助!

回答

0

我認爲他所得到的是,在「單班」計劃下,每個可能的組合需要一個「組合」類。所以,以下的他的例子 「和鹼BTN組件添加另外的5種類型的按鈕的和3種另外的尺寸」:

多類(9)

  • .btn
  • .btn-主要
  • .btn-危險
  • .btn-成功
  • .btn鏈接
  • .btn預警
  • .btn - 超小
  • .btn小
  • .btn大型

    <a href="http://google.com/" class="btn btn-primary btn-large"> 
        Example multi-class link 
    </a> 
    

單級(24)

  • .btn
  • .btn-extral-small
  • .btn小
  • .btn-大
  • .btn基色
  • .btn原色超小
  • .btn原色小
  • .btn原色大
  • 。BTN-危險
  • .btn-危險 - 超小
  • .btn-危險小
  • .btn-危險,大
  • .btn-成功
  • .btn成功 - 超小
  • .btn成功 - 小
  • .btn成功 - 大
  • .btn鏈接
  • .btn鏈接,超小
  • .btn連桿小
  • .btn鏈接大型
  • .btn預警
  • .btn預警,超小
  • .btn預警小
  • .btn-警告 - 大

    <a href="http://google.com/" class="btn-primary-large"> 
        Example single-class link 
    </a> 
    

我想,這使得它非常顯而易見的,爲什麼第一種方法是更靈活,更易於維護。

+0

謝謝你,讓知府感吧!我認爲,如果他想說的話,按照「添加5種類型的按鈕以及每增加3種尺寸」這樣的話,對我來說就會更容易理解。 – dntz

+0

你的示例多級鏈接應該是「btn btn-primary btn-large」嗎?目前這是一個班級。 – davidpauljunior

+0

@davidpauljunior - 你說得對,我編輯了第二個例子。 –

0

大概連尤爲明顯。將利用青菜的力量,你的迴應做

.whatever-name { 
    @extend %btn; 
    @extend %btn-primary; 
    @extend %btn-large; 
}