1

私たちは BEM を広範囲に使用していますが、コンポーネントの構造化と命名のいくつかの方法に直面しており、ベスト プラクティスに関する意見を求めています。再利用可能なコンポーネント ( .box、.media、 など.btn) には「オブジェクト」の概念を使用し、オブジェクトの組み合わせである傾向がある設計された UI コンポーネントには「コンポーネント」の概念を使用しています。

問題の例として、ワイヤーフレームからこれを考えてみましょう:

ワイヤーフレーム

画像であるという考えは、この特定のアイテムで利用可能な他の画像の数に重ねられます。

このレイアウトに取り組むには少なくとも 2 つの方法があり、最適なオプションを見つけようとしています。

オプション1

コンポーネントとしてではなく、マークアップ/CSS でレイアウトを適用します。以下のすべてのスタイルは、プロジェクト間で再利用できます。プロジェクト固有のものはありません。

HTML :

<div class="relatively-positioned">
    <img src="..." alt="" />
    <div class="box box--rounded  absolutely-positioned offset--10-10">12</div>
</div>

CSS :

.box {
    padding: 5px;
}

.box--rounded {
    border-radius: 5px;
}

.relatively-positioned { position: relative; }
.absolute-positioned { position: absolute; }

.offset--10-10 { top: 10px; left: 10px; }

オプション 2

これを、画像とカウント用のボックスで構成されるコンポーネントとして実装します。

HTML :

<div class="image-preview">
    <img class="image-preview__img" ... />
    <div class="image-preview__count  box box--rounded">12</div>
</div>

CSS :

同じ CSS がbox/box--roundedに適用され、プロジェクト間で再利用するための一般的なものになります。コンポーネントは、このプロジェクトに対してのみ定義されます。

.image-preview {
    position: relative;
}

.image-preview__count {
    position: absolute;
    top: 10px;
    left: 10px;
}

ご意見、ご感想、その他アイデア、大歓迎です！

4

2 に答える 2

1

最初のオプションのインライン CSS のようなアプローチではなく、セマンティック ブロックになるため、2 番目のオプションの方が優れています。

インターフェースは、それがどのように見えるかではなく、何をするかという観点から考える必要があります。そうしないと、デザインを更新したり、実際に変更を加えたりするのがはるかに難しくなります。

于 2014-06-12T09:50:27.737 に答える