带有SMACSS的自适应模块

Question

我在几个项目中使用SMACSS，但通常面临一个问题--构建自适应内容模块的正确方法是什么。

例如，我有布局网格类(.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>

但是这种方法使得布局和模块之间的紧密耦合，打破了SMACSS的主要规则，即模块应该独立于布局。

另一种方法是构建特殊模块(.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>

这种方式不会破坏规则，但是HTML标记看起来是重载的。

那么问题--，在SMACSS中构建自适应内容模块的方式是什么?？

Answer 1

经过一些讨论和案例研究之后，我发现这种情况的正确方法是使用一些中介块，比如列表及其项目的宽度百分比。因此，它可以帮助从模块中分离布局，使中介块可以在不同的布局网格中使用，并对中介块和布局管理不同的自适应行为规则。