隔離されたコンポーネントを作成するときに複数のcssクラスを組み合わせることをお勧めしますか？

Question

私はしばらくの間、私のプロジェクトで "BEMのような"構文を使用してきました。私はこれを見たときに最近、私はいくつかのCSSの記事を再読み込みしたhttps://en.bem.info/methodology/css/#single-responsibility-principle

を基本的には、代わりにそのクラス内header__buttonのすべてのスタイルを置くこと、それはまた、buttonクラスのスタイルに中継します。この場合、要素のヘッダーとbuttonクラスを結合していませんか？つまり、将来的にbuttonクラスを変更する場合は、このクラスを使用する場所を正確に覚えておく必要があります。

この例では、同じスタイルを使用しようとしているためだと思いますが、レイアウトコンポーネントはどうですか？たとえば、子どもを垂直に配置するMenuクラスがあるとします。子クラスにも同様のスタイルを適用するSidebarクラスがあります。そして、私たちは、このようにそれらを使用します。

menu.css

Menu { 
} 
Menu__item { 
} 

sidebar.css

Sidebar { 
} 
Sidebar__item { 
} 

index.htmlを

<div class="Menu Sidebar"> 
    <div class="Menu__item Sidebar__item"> 
    </div> 
    <div class="Menu__item Sidebar__item"> 
    </div> 
</div> 

Sidebarクラスの項目をどのように配置するかに関するコードをすべて入れていない場合、このコードの一部をMenuから変更すると、Sidebarクラスが壊れている可能性があります。他のケースでは、両方のクラスでコードMenuとSidebarを繰り返すと、質問の募集で議論されたSRP（単一責任の原則）に違反しています。最近私のプロジェクトではコードの重複を優先していたので、Sidebarに必要なコードをすべてSidebarクラスに書きます。

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

Answer 1

部分的にあなたの質問に答える章もあります：あなたの例ではhttps://en.bem.info/methodology/css/#external-geometry-and-positioning

私は一日SidebarをいただきたいがMenu位置決めのための責任を負わなければならないが、それはMenu__item Sについて何を知っているべきではありません。そして、Menuは順番にそれ自身の位置について何も知ってはいけませんが、その中にアイテムを置くべきです。

あなたは本当にそれが内部Sidebar使用ネストされたセレクタだときMenu__itemポジショニングで何かを変更する必要がある場合：メニューやサイドバー、およびこれらのクラスのいずれかを使用します。私が思うに

.Menu { 
} 
.Menu__item { 
} 
.Sidebar { 
} 
.Sidebar .Menu__item { 
} 

Answer 2

、あなたはそれが何であるか、決定する必要があります。ブロックが少し異なる場合は、修飾子を使用する必要があります。修飾子でこれを行うことができない場合は、2つの異なるクラスを使用します。

// your menu 
.menu { } 
.menu__item { } 

// your sidebar 
.menu--some-modifier { } 
.menu__item--some-modifier { } 
// 
.sidebar__menu { 
    // set some styles (margins, positioning) for .menu 
} 

独立した2つの異なるブロック：

// your menu 
.menu { } 
.menu__item { } 

// your sidebar 
.sidebar { } 
.sidebar__item { }