4

SMACSS (CSS のスケーラブルおよびモジュール アーキテクチャ) を使用しています: http://smacss.com/

具体的には、Yahoo の Pure CSS (SMACSS) フレームワーク (Grids スタイルシートのみ) を使用しています: http://purecss.io/grids/

モジュール内にグリッドを配置するのは正しいですか?

たとえば、これは「foo」モジュール内のグリッドです。foo モジュールは、3 つの項目の行を表示する必要があります。

<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

1 つの規模のプロジェクトを構築するのと同じ質問に直面しました。したがって、答えはノーです。

モジュールの独立性という最も重要なルールを破るからです。を使用するのが正しい方法です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 ブロック グリッドをチェックアウトできます。そのようなメディエーターモジュールの良い例です

于 2014-01-26T15:18:50.423 に答える