4

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

具体来说，我使用的是 Yahoo 的 Pure CSS (SMACSS) 框架（只是 Grids 样式表）： 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>

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

<div class="foo">

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

</div>
4

2 回答 2

4

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

因为它会打破最重要的规则——它的模块独立性。正确的方法是使用module-mediator. 我有一个类似的任务 - 将网格与模块分开，这样我就可以将模块排列成列。我创建了一个名为m-listwith elements的模块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。它是这种中介模块的一个很好的例子

于 2014-01-26T15:18:50.423 回答
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在 a中使用l-constrain-me- 但这是我自己的观点。

于 2014-01-30T07:55:52.470 回答