この記事では、フロントエンドコードを整理するために取り組んできました。BEM / SMACSSの記事を参照し、次に他の記事を参照します。
私は本当にベストプラクティスが何であるかを理解しようとしています...私はこの "標準"を決定するために数日を持ち、それから高優先度/高可視性/限られたタイムラインプロジェクトを実行する必要があります。そのため、アプリと同じように拡張できる基盤から始めたいと思います。
segment... という名前のコンポーネントがあるとすると、segments1ページあたり最大10 個のページが作成されます。それぞれsegmentが同じ基本クラスを共有します。ただし、特定のものsegmentsには修飾子があります（異なる背景色）。さらに、（BEMアプローチの）各ブロック内の要素にも修飾子があります。実例を示すために、ここに簡単な実装を示します（単一の要素のみで、arrowサイト全体にはそれぞれ4〜5個の要素がありますsegment）。
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow--orange {
@extend .segment__arrow;
background-image: url('/images/arrow_orange.png');
}
.segment__arrow--white {
@extend .segment__arrow;
background-image: url('/images/arrow_white.png');
}したがって、これは単一クラスのアプローチです。
<div class="segment__arrow--white"> ... </div>または、マルチクラスアプローチを使用することもできます。
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow--orange {
background-image: url('/images/arrow_orange.png');
}
.segment__arrow--white {
background-image: url('/images/arrow_white.png');
}私のマークアップはどこにあるでしょう：
<div class="segment__arrow segment__arrow--white"> ... </div>第三に、私はできる：
.segment__arrow {
position: absolute;
bottom: -24px;
left: 50%;
margin-left: -11px;
background-position: center no-repeat;
height: 21px;
width: 21px;
z-index: 2;
}
.segment__arrow.orange {
background-image: url('/images/arrow_orange.png');
}
.segment__arrow.white {
background-image: url('/images/arrow_white.png');
}そして、私のクラスのdefは
<div class="segment__arrow orange"> ... </div>おそらくsa_orange、緩やかなセレクターを避けるような何かでオレンジを名前空間にすることさえあります。
私が探している最終結果は、コードが少ない/メンテナンスが簡単です（おそらく、これで説明されているように、単一クラスのアプローチ（オプション1）を除外します） 、スケーラブルなアーキテクチャに関する素晴らしい記事で。マルチクラスアプローチ（オプション2）は、多くの冗長性（特に私のHTML内）ですが、非常に明示的です。3つ目はマルチクラスアプローチを使用しますが、名前空間修飾子（.segment__arrowなど）を使用しないため、少し冗長ではありません（ただし、明示的ではなく、高い）衝突の可能性）。
これについて実際の経験を持っている人は、これに取り組む最善の方法についてフィードバックを持っていますか？
.orange単独では修飾子としての意味はありません。.segment__arrow--orangeマルチクラスアプローチで使用することに大きな問題はないと思います。もちろん、より大きなプロジェクトでは、HTMLが少し制御不能になる可能性があります（多くのクラス）。