3

サイト全体で一般的な非ブロック固有のスタイルを定義する最良の方法は何ですか?

例えば：

html

<div class="intro">
    <p class="intro__text">foo</p>
</div>

<div class="profile">
    <p class="profile__text">bar</p>
</div>

サス/css

.intro__text {

}
.profile__text {

}
.text {
    margin-bottom: 0.5em;
}

テキストのスタイルを同じにしたい場合、(プリプロセッサを使用している場合)とクラスに@extend .text入れるか、サイト全体のすべての段落に のクラスを持たせますか?.intro__text.profile__texttext

これらのソリューションは両方とも、私には少し間違っているようです。

非常に一般的なスタイルを使用している場合、レンダリングされた css 全体で多くのスタイルを複製する (ファイルサイズを大きくする) ように感じますがtext、マークアップ全体でクラスを繰り返すと、不必要に冗長で乱雑に見えます。

この状況のベスト プラクティスはありますか?

4

2 に答える 2

0

いくつかのオプションがあります:

  1. プリプロセッサ (Sass/LESS/etc) mixins + clean-css/postcss クリーナー — この方法はシンプルで強力ですが、柔軟ではありません。動的なランディング ページや SPA などには役に立たないからです。

  2. 外側のブロック ミックス (BEM/ランタイム mixin) の要素: class="intro__text grid__text" — この方法では、ビジュアル スタイルとポジショニング スタイルを手動で分割し、それらのクラスを一緒に使用するだけです。

  3. その他のブロック ミックス: class="intro__text paragraph paragraph--valuable" — 前のバリアントとほぼ同じですが、abstract grid ブロックにリンクせずに、最良かつ最も柔軟な方法 (IMHO) です。

注意: また、実行時でも修飾子を使用して BEM ミックスを拡張できます。これは非常に強力なツールです。

NB2: 動的な Web ページが必要ない場合は、自由に sass mixin を使用できます。個人的には、sass/less mixin は使用せず、独自のクラスで使用される色、グリッド、ギャップなどのグローバル変数のみを使用します。

于 2015-11-19T08:14:30.227 に答える