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

经过一些讨论和案例研究后，我发现这种情况的正确方法是使用一些中介块，比如列表中的项目百分比宽度。因此，它可以帮助将LAYOUT与MODULE分开，使得mediator块可以用于不同的布局网格，并为介体块和布局管理不同的自适应行为规则。

具有SMACSS的自适应模块

1 个答案: