CSSのベストプラクティス：変更するクラスの追加、または新しいクラス全体の作成

Question

自分のCSSの書き方を少し変えていますが、それが良いのか悪いのかは分かりません。 は私がcontainer

.container { display: block; border: 1px solid red; padding: 20px; height: 400px; } 

は今も150ピクセルの高さを言うの小さなコンテナをしたい場所で言うことができますクラスを持っている想像してみてください。これについて最善の方法は何ですか？

以前私がクラスを作っています：

.container-small { display: block; border: 1px solid red; padding: 20px; height: 150px; } 

はしかし、明らかに私のCSSファイルで複製が今そこにあります。だから、最近、私はsmallのような修飾クラスを使用してcontainer横にHTMLでそれを追加し、そのようなCSSファイルに追加し始めている：私は別のクラスなどを持っている場合

.container.small { height: 150px } 

私はこれでforseeできる問題は、ありますbanner、それにsmallクラスを追加しますが、それを90pxの高さにすると、それは他の人が自分のプロジェクトを見ていると混乱する可能性がありますか？ smallは別の場所でさまざまなことをしています。これは既に受け入れられているパラダイムですか、あるいは私がsmallをどのように使用していたかと同様の方法で新しいクラスを毎回使うべきですが、各クラスの新しい名前が付いています。

.container-small { height: 150px } 

と

.banner-small { height: 90px } 

私はちょうどsmall、big、wideを追加したり、各要素にクラスを変更すること何のシンプルさを好むが、これは悪い考えですなぜ任意の具体的な理由があるのですか？間違った要素の横にあるためにCSSを破棄する前に、CSSがsmallタグの読み込みをターゲットとするため、CSSを少し変更すると少し遅くなると推測しますが、おそらく無視できる量です。

ベストプラクティスは何ですか？

Answer 1

多分あなたは分離すべきであるあなたが唯一のテキストのサイズ、色を配置し、

小さなを入力し

バナーのようなクラスは、サイズのみと多分境界線の色やサイズ

コンテナを持つことになります同じフレックスコンテナ特性を有する上記有する有し

などなどら

class="banner small" 
class="container big" 
class="inside_container small" 

Answer 2

私はCSSの方法論について読んでおくべきだと思います。 OOCSS、BEM、SMACSSの3つの異なる方法論があります。少なくとも、最も人気があります。あなたは年によって、あなたがに話す人によってこのarticle

Answer 3

ベストプラクティスの変化が、共通paradignで、例えば、開始することができます私は

を行うものの個人的に

.container .container-small {}

のような名前空間を使用することです

.container.small {}

、その後、巣それが読める、それを維持するために少ないか、SASSを使用。