1

私はいくつかのプロジェクトで SMACSS を使用していますが、通常は 1 つの問題に直面しています。それは、アダプティブ コンテンツ モジュールを構築する正しい方法です。

たとえば、LAYOUT グリッド クラス (.container、.row、.span-1、.span-N) + アダプティブ デザイン用のメディア クエリがあります。

たとえば、リンクリストを列に分割するなど、コンテンツモジュールに同じルールを使用して適応動作を管理したいと思います。

<ul class="list">
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
  <li class="list-el"> item 1</li>
</ul>

次のように LAYOUT クラスを MODULE 要素に追加して管理できます。

<ul class="list row">
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
    <li class="list-el span-3"> item 1</li>
</ul>

しかし、このアプローチは LAYOUT と MODULE の間の密結合を引き起こし、モジュールは LAYOUT から独立している必要があるという SMACSS の主なルールを破ります。

もう 1 つの方法は、特別なモジュール (.adapt) をビルドし、次のようにコンテンツ モジュールをその中に入れます。

<div class="adapt">
    <div class="adapt-span3">
        <ul class="list">
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
            <li class="list-el"> item 1</li>
        </ul>
    </div>
    <div class="adapt-span3">
      <ul class="list"> ... </ul>
    </div>
    <div class="adapt-span3">
         <ul class="list"> ... </ul>
    </div>
    <div class="adapt-span3">
         <ul class="list"> ... </ul>
    </div>
</div>

この方法はルールに違反していませんが、HTML マークアップがオーバーロードされているように見えます。

質問 - SMACSS でアダプティブ コンテンツ モジュールを構築する方法は何ですか?

4

1 に答える 1

0

いくつかの議論とケーススタディが通過した後、そのようなケースの正しい方法は、アイテムのパーセンテージ幅のリストのようなメディエーターブロックを使用することがわかりました。そのため、 LAYOUT を MODULE から分離し、メディエーター ブロックをさまざまなレイアウト グリッドで使用できるようにし、メディエーター ブロックとレイアウトのさまざまな適応動作ルールを管理するのに役立ちます。

于 2014-03-21T11:07:20.433 に答える