BEM 命名規則を使用する場合、表示クラスと非表示クラスの名前の一部としてブロックを含める必要がありますか?
div.block-class があり、それを非表示にしたい場合、それは div.block-class.hide または div.block-class.block-class--hide である必要がありますか?
BEM 命名規則を使用する場合、表示クラスと非表示クラスの名前の一部としてブロックを含める必要がありますか?
div.block-class があり、それを非表示にしたい場合、それは div.block-class.hide または div.block-class.block-class--hide である必要がありますか?
hide
2 番目のオプションは、混合先のスタンドアロン ブロックと見なさない限り正しいものですblock-class
( https://en.bem.info/faq/#how-do-i-make-global-modifiers-for-blocksを参照)。
何かを隠すという概念は、ブロック間で非常に再利用可能です。そのため、ユーティリティの候補として適しています ( https://github.com/suitcss/suit/blob/master/doc/utilities.mdを参照)。したがって、 andを持つのではなく、.panel--hide
andを持つ.btn--hide
ことができます。非表示は、どのブロックでもまったく同じ方法で実行できる操作であるため、各ブロックで繰り返し実装するのではなく、任意のブロックで動作する独自の関数を作成します。プログラミング言語で行うようなものです。これにより、ブロックがDRYに保たれます。ブロック自体に非表示にする機能を実装するのは、特定のブロックを非表示にする方法がブロック自体に固有のものである場合のみです。<button class="btn u-hide">...</button>
<article class="panel u-hide">...</article>
hide
hide
hide(panel)
また、「非表示」は状態として表現できるものでもあることに注意してください ( https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#is-stateOfComponentを参照)。is-hidden
状態の規則では、またはのように「is-」を前に付けis-active
ます。http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/を読むことをお勧めします。状態とユーティリティをブロックと一緒に使用する方法がよく説明されています。