ミックスインまたは組み合わせたスタイルセットをスタイルシートに使用する方が良いですか？

Question

私は、パフォーマンス、可読性、日常使用の面でスタイルシートのコーディング方法が優れていることを知りたいと思います。

のは、私たちはスタイルを作りたいとしましょう：

.container { 
    background-color: red; 
    .nested-container { 
    color: blue; 
    } 
} 

.container-two { 
    background-color: black; 
    .nested-container { 
    color: blue; 
    } 
} 

私はこのような場合のために、より効率的である方法だろう。

/* mixins way */ 
@mixin duplicated-container { 
    .nested-container { 
     color: blue; 
    } 
} 

.container { 
    background-color: red; 
    @include duplicated-container; 
} 
.container-two { 
    background-color: black; 
    @include duplicated-container; 
} 

/* combined sets way */ 
.container { 
    background-color: red; 
} 
.container-two { 
    background-color: black; 
} 
.container, 
.container-two { 
    .nested-container { 
    color: blue; 
    } 
} 

第1の方法は、少なくとも私にとってははるかに読みやすくなります。 2番目の方法は、コードが何らかの形で複製されないため、出力ファイルをmixinsを使用する場合よりも小さくします。

containerとcontainer-twoがファイル内の2つの異なる場所にある場合、これは達成したいことのほんの非常に単純な例であることに注意してください。最初の方法では読みやすく簡単に再生できますが、最終的な出力にコードがあるので、この方法でmixinsを使用するのがよいかどうかはわかりません。

これは私にとって最後の数日間の大きなジレンマでした。私はいつも面倒なスタイルシートで終わるので、専門家に助けを求めることにしました。 私はすべての助けに感謝します。

Answer 1

最初の方が良い選択のようです。クラスは1つの場所に表示されます。

.container-threeを追加した後は、.nested-containerのスタイルを取得するクラスのリストにも追加する必要があります。

ミックスインを使用しているときにファイルサイズを気にする必要はありません。最新のCSSミニファイアとgzippedコンテンツのパイプラインがほとんどのサーバーでデフォルトになっているため、CSSでコンテンツを複製してもファイルサイズが大幅に増加することはなく、might even perform betterです。

コードの重複を心配しないでください。とにかくgzipによって大幅に最適化されるマイクロ最適化です。この場合は読みやすいようにしてください。