BEM class names: block--hide 还是只是隐藏？
BEM class names: block--hide or just hide?
使用 BEM 命名约定时，show 和 hide class是否应该将块作为名称的一部分？
所以如果我有div.block-class并且我想隐藏它，应该是div.block-class.hide还是div.block-class.block-class--隐藏 ?
第二个选项是正确的，除非您将 hide 视为与 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). So rather than having .panel--hide and .btn--hide, you can have <button class="btn u-hide">...</button> and <article class="panel u-hide">...</article>. Hiding is an operation that can be performed on any block the very same way so rather than implementing hide in each block in a repetitive manner, we make hide its own function that operates on any block. Sort of like doing hide(panel) in a programming language. This keeps the blocks DRY。我唯一一次实现隐藏在块本身内的功能，如果隐藏特定块的方式对于阻止自己。
还值得注意的是，'hide' 也可以表示为状态（请参阅 https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#is-stateOfComponent). The convention for states is that they are prefixed with 'is-' as in is-hidden or is-active. I recommend reading http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/，因为它很好地解释了状态和实用程序如何与块一起使用。
请注意。虽然 是完全正确的并且 hide 作为一个独立的块并不直接与 BEM 的规则相矛盾，但这是一个坏主意，因为它很可能会破坏关注点分离。如今，随着 flexbox 和 grid 的快速发展，许多 类 定义了 display: 属性。 IE。将 类 与 hide 块混合的结果将取决于您定义块的顺序，即不可预测。
这使得隐藏修饰符 block-class--hide 成为严格遵循 BEM 时唯一合理的解决方案。
由于封装，这也是一个很好的解决方案。很可能你会有几种隐藏块的方法：visibility:、display:、transform，而对于 javascript 和你的应用程序的其余部分，它们都应该表示 hidden.
也就是说，有时严格遵循 BEM 可能不是最好的主意。 的回答中已经考虑了这种情况。
使用 BEM 命名约定时，show 和 hide class是否应该将块作为名称的一部分？
所以如果我有div.block-class并且我想隐藏它，应该是div.block-class.hide还是div.block-class.block-class--隐藏 ?
第二个选项是正确的，除非您将 hide 视为与 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). So rather than having .panel--hide and .btn--hide, you can have <button class="btn u-hide">...</button> and <article class="panel u-hide">...</article>. Hiding is an operation that can be performed on any block the very same way so rather than implementing hide in each block in a repetitive manner, we make hide its own function that operates on any block. Sort of like doing hide(panel) in a programming language. This keeps the blocks DRY。我唯一一次实现隐藏在块本身内的功能，如果隐藏特定块的方式对于阻止自己。
还值得注意的是，'hide' 也可以表示为状态（请参阅 https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#is-stateOfComponent). The convention for states is that they are prefixed with 'is-' as in is-hidden or is-active. I recommend reading http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/，因为它很好地解释了状态和实用程序如何与块一起使用。
请注意。虽然 hide 作为一个独立的块并不直接与 BEM 的规则相矛盾，但这是一个坏主意，因为它很可能会破坏关注点分离。如今，随着 flexbox 和 grid 的快速发展，许多 类 定义了 display: 属性。 IE。将 类 与 hide 块混合的结果将取决于您定义块的顺序，即不可预测。
这使得隐藏修饰符 block-class--hide 成为严格遵循 BEM 时唯一合理的解决方案。
由于封装，这也是一个很好的解决方案。很可能你会有几种隐藏块的方法：visibility:、display:、transform，而对于 javascript 和你的应用程序的其余部分，它们都应该表示 hidden.
也就是说，有时严格遵循 BEM 可能不是最好的主意。