SMACSS：在模块内使用网格正确吗？

我正在使用SMACSS（CSS的可伸缩和模块架构）：

具体来说，我使用的是雅虎的纯CSS（SMACSS）框架（只是网格样式表）：

在模块内部放置网格是否正确

例如，这里是“foo”模块内部的网格。 foo模块应该显示一行三个项目

<div class="foo">

    <div class="pure-g">

        <div class="pure-u-1-3 foo-thumbnail">Eat</div>
        <div class="pure-u-1-3 foo-title">At</div>
        <div class="pure-u-1-3 foo-description">Joes!</div>

    </div>

</div>

吃
在
乔！

或者，从模块中删除网格并编写自己的CSS以实现布局（而不是依赖网格类）是否更符合SMACSS方法。例如：

<div class="foo">

    <div class="foo-thumbnail">Eat</div>
    <div class="foo-title">At</div>
    <div class="foo-description">Joes!</div>

</div>

吃
在
乔！

我在建设一个规模的项目时遇到了同样的问题。所以答案是否定的

因为它将打破最重要的规则——模块独立性。正确的方法是使用

模块中介

。我有一个类似的任务——将网格和模块分开，这样我就可以将模块按列排列。我用元素

m-list-cell

创建了一个名为

m-list

的模块

因此，在您的情况下，我将遵循相同的方法-在模块内部，我将使用百分比几何体而不是px，并使用一些中介体将几何体设置为带有模块的容器

以下是一个例子：

让我们构建布局。让它成为一个简单的2列页面

<div class="l-container">
    <div class="l-grid l-grid_10">
        <!-- MAIN CONTENT -->
    </div>
    <div class="l-grid l-grid_2">
        <!-- SIDEBAR -->    
    </div>
</div>

---

你可以结账。这是此类中介模块的一个很好的例子，网格本身就是布局规则，就像你从书中知道的l-约束和l-内联，因此将它们与模块本身混合不是Smacss方式，它应该更像这样：

<div class="pure-g">
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
</div>

... 
... 

---

然而！将pure-x-x-x类放在同一个标记中并不会降低模块的独立性，只要它不依赖于它，您可以在

l-Constraint-me

中使用

foo缩略图，但这是我自己的观点。
如果您希望内容位于与站点其他部分一致的网格上，并且它对您有效，然后使用它。如果你已经有了可以工作的css，不要为了不使用网格而重新编写它。这看起来是一个很好的答案。我一直在到处寻找关于模块中介的更多信息，因为从您对它的描述来看，它听起来像是一个成熟的模式。我甚至买了这本书，但是运气不好。如果你有时间，我很想看到更多的信息/链接或代码示例@你好，谢谢你的反馈！我附上了一些代码示例和模块说明，如果您需要一些其他信息，请告诉我
.m-list{
    width: 100%;
}

.m-list:after{
    content: "";
    display: block;
    clear: both;
}

.m-list li {
    float: left;
    box-sizing: border-box;
}

/* Lets define 4 columns view. We can scale it in depends of our needs */

.m-list_4cols li {
    width: 25%;
}

/* 
   Also we can use @media rules to reach adaptive behavior 
   you can use additional class like **.m-list_Ncols_onsmall** to change columns number.
   You can also scale modificators set according to your needs.
*/

@media only screen and (max-width: 520px) {

    .m-list .m-list_1col_onsmall li {
        width: 100%;
    }

    .m-list .m-list_2cols_onsmall li {
        width: 50%;
    }

    .m-list .m-list_3cols_onsmall li {
        width: 33.33%;
    }

}

<div class="pure-g">
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
    <div class="pure-u-1-2">
        <div class="a-module"> ... </div>
    </div>
</div>