具有SMACSS的自適應模塊

Question

我在少數項目中使用SMACSS，但無意間遇到了一個問題 - 構建自適應內容模塊的正確方法是什麼？

例如我有LAYOUT網格類（.container，.row，.span-1，.span-N）+適應性設計的媒體查詢。

我想使用相同的規則內容模塊來管理適應性行爲，如分鏈表爲列：

<ul class="list"> 
    <li class="list-el"> item 1</li> 
    <li class="list-el"> item 1</li> 
    <li class="list-el"> item 1</li> 
    <li class="list-el"> item 1</li> 
</ul> 

我可以管理它添加布局類用於組件元件是這樣的：

<ul class="list row"> 
    <li class="list-el span-3"> item 1</li> 
    <li class="list-el span-3"> item 1</li> 
    <li class="list-el span-3"> item 1</li> 
    <li class="list-el span-3"> item 1</li> 
</ul> 

但是這種方法需要在LAYOUT和MODULE之間緊密耦合，SMACSS的主要規則是什麼，這個模塊應該獨立於LAYOUT。

另一種方式是建立特殊模塊（.adapt），並把內容模塊到這樣的：

<div class="adapt"> 
    <div class="adapt-span3"> 
     <ul class="list"> 
      <li class="list-el"> item 1</li> 
      <li class="list-el"> item 1</li> 
      <li class="list-el"> item 1</li> 
      <li class="list-el"> item 1</li> 
     </ul> 
    </div> 
    <div class="adapt-span3"> 
     <ul class="list"> ... </ul> 
    </div> 
    <div class="adapt-span3"> 
     <ul class="list"> ... </ul> 
    </div> 
    <div class="adapt-span3"> 
     <ul class="list"> ... </ul> 
    </div> 
</div> 

這樣doesent打破規則，但HTML標記看起來超載。

所以這個問題 - 你在SMACSS中構建自適應內容模塊的方式是什麼？

Answer 1

經過一些討論和案例研究的通過後，我發現這種情況的正確方法是使用一些中介塊，比如列表中包含項目百分比的列表。因此，它可以幫助將佈局與MODULE分離，使介體塊可以用於不同的佈局網格並管理介體塊和佈局的不同自適應行爲規則。