BEM類名：block - hide或者只是隱藏？

Question

當使用BEM命名約定時，應該顯示並隱藏類是否將塊作爲名稱的一部分？

所以，如果我有div.block類，我想隱藏它，應該是div.block-class.hide或div.block-class.block-class - hide？

Answer 1

第二個選項是正確的，除非您將hide視爲您混合到block-class（參見https://en.bem.info/faq/#how-do-i-make-global-modifiers-for-blocks）的獨立塊。

Answer 2

隱藏某些東西的概念可以在各個塊之間重複使用。因此，它是公用事業公司的理想選擇（請參閱https://github.com/suitcss/suit/blob/master/doc/utilities.md）。因此，您可以使用<button class="btn u-hide">...</button>和<article class="panel u-hide">...</article>而不是.panel--hide和.btn--hide。隱藏是一種可以用同樣的方式在任何塊上執行的操作，而不是以重複的方式在每個塊中實現hide，我們使hide自己的功能可以在任何塊上操作。有點像在編程語言中做hide(panel)。這使塊DRY。只有當我實現隱藏塊本身的功能時，纔會隱藏特定塊的方式，這對於塊本身是唯一的。

還值得注意的是，'隱藏'也可以表示爲一種狀態（參見https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#is-stateOfComponent）。國家的慣例是它們的前綴是'is-'，如is-hidden或is-active。我建議閱讀http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/，因爲它很好地解釋了狀態和公用程序如何與塊一起使用。