css - 使用 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>

我可以像这样将 LAYOUT 类添加到 MODULE 元素:

<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>

这种方式并没有违反规则，但是 HTML 标记看起来重载了。

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

Answer 1

经过一些讨论和案例研究后，我发现这种情况的正确方法是使用一些调解 block ，比如带有元素宽度百分比的列表。因此，它有助于将 LAYOUT 与 MODULE 分离，使中介 block 可以在不同的布局网格中使用，并为中介 block 和布局管理不同的自适应行为规则。