我在少数项目中使用 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>
我可以管理它向 MODULE 元素添加 LAYOUT 类,如下所示:
<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 中构建自适应内容模块的方式是什么?