Question

我正在使用SMACSS（CSS的可扩展和模块架构）： http://smacss.com/

具体来说，我使用的是Yahoo的Pure 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>

OR，是否更符合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

我面临着构建一个规模项目的同样问题。所以答案是没有。

因为它将打破最重要的规则 - 它的模块独立性。正确的方法是使用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%;
    }

}

您可以结帐Foundation block grid。它是这种中介模块的一个很好的例子

Answer 2

网格本身就是布局规则 - 就像你从书中知道的l-constrained和l-inline一样，所以将它们与模块本身混合起来不是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-xxx类放在同一个标记中并不会让你的模块不那么独立，只要它不依赖它，你可以在foo-thumbnails中使用l-constrain-me - 但这就是我自己的意见。

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

2 个答案: