3

次のような BEM ツリーでグリッドを構築することを考えました。

  • グリッド
  • grid__行
  • grid__列グループ
  • grid__column

このティザーブロックのようなコンテンツもあります

  • ティーザー
  • teaser__thumbnail
  • teaser__見出し
  • teaser__body
  • teaser__link

グリッドのさまざまな列にティーザー要素を表示したい場合は、次のマークアップにつながります。

    <div class="grid__column-group teaser">
      <div class="grid__column">
        <img class="teaser__thumbnail"/>
      </div>
      <div class="grid__column">
        <h3 class="teaser__headline">...</h3>
        <p class="teaser__body">..</p>
      </div>
    </div>

私は BEM を使い始めたばかりですが、異なるブロックのスタイルが互いに影響を与えるため、これには欠陥があると感じています。

それは正しい扱い方ですか？より良い解決策の提案はありますか?

4

2 に答える 2

2

あなたが行ったことは間違っていませんが、各コンポーネントの責任を分離します。私の考えでは、ページ グリッドの責任はページ上にコンポーネントを配置することですが、コンポーネント内に要素を配置する必要はありません。

隔離

重要なことは、コンポーネントを常に完全に分離して構築することです。コンポーネントは、そのコンテナーを認識したり、コンテナーに依存したりしてはなりません。コンポーネントを任意のページの任意の位置に配置でき、正しくレンダリングできる必要があります。これは、この技術の重要なポイントの 1 つです。

単一の責任

マークアップを見ると、コンポーネントが正しくレンダリングするにteaserは の知識が必要なようです。gridこれを回避し、コンポーネントに必要なレイアウトをコンポーネント自体に含めようとします。実際、Nicole Sullivan による古典的なメディア オブジェクトのように見えるので、一見の価値があります。これは、コンポーネントが 1 つの責任を持つべきであるという原則を守ります。はgridページ上にコンポーネントを配置し、コンポーネントはその要素を配置してスタイルを設定します。

これにより、teaserコンポーネントは、grid.

于 2014-10-23T11:46:39.850 に答える
1

それは正しい扱い方ですか？

はい。ミックスです。公式のチュートリアルでは、この手法を使用しています。

CSS コードでは、すべての「ビジュアル」ブロック ( などgrid) を最初にスタイルし、次にセマンティック ブロック ( などteaser) をスタイルすると便利です。セマンティック ブロックはより具体的であり、再利用可能なビジュアル パターンからいくつかのデフォルト ルールを上書きできるためです。

于 2014-10-23T09:10:20.347 に答える