SMACSS:在模块中使用网格是正确的吗？

Question

我使用的是SMACSS (CSS的可扩展和模块架构)：http://smacss.com/

具体来说，我使用的是雅虎的纯CSS (SMACSS)框架(只是网格样式表)：http://purecss.io/grids/

在模块中放置网格正确吗？

例如，下面是“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>

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

<div class="foo">

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

</div>

Answer 1

我也面临着同样的问题--建设一个规模的项目。所以答案是no。

因为它将打破最重要的规则--它的模块独立性。正确的方法是使用module-mediator。我有一项类似的任务--将网格从模块中分离出来，这样我就可以在列中安排模块。我用元素m-list创建了一个名为m-list-cell的模块。

因此，在您的情况下，我将遵循同样的方式-在模块内部，我将使用百分比几何而不是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>

接下来，在主要内容区域中放置N列列表：

<div class="l-container">
    <div class="l-grid l-grid_10">
        <ul class="m-list m-list_4cols">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</div>

现在介绍一下m-list：它是我们的魔杖--它的任务区域与列分开：

.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%;
    }

}

您可以结帐基础块网格。这是这种中介模块的一个很好的例子。

Answer 2

网格本身就是布局规则，就像你从书中知道的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>

不过！将纯x-x-x类放入相同的标记中并不能真正降低模块的独立性，只要它不依赖它，您可以在l-constrain-me中使用l-constrain-me--但这是我自己的观点。