使用 BEM 命名约定时，显示和隐藏类是否应该将块作为名称的一部分？
所以如果我有 div.block-class 并且我想隐藏它，它应该是 div.block-class.hide 还是 div.block-class.block-class--hide ？
问问题
835 次
3 回答
3
第二个选项是正确的，除非您将其视为hide您混合的独立块block-class（请参阅https://en.bem.info/faq/#how-do-i-make-global-modifiers-for-blocks）。
于 2015-11-05T14:33:56.070 回答
1
隐藏某些东西的概念可以跨块重复使用。因此，它是一个很好的实用程序候选者（参见https://github.com/suitcss/suit/blob/master/doc/utilities.md）。因此，您可以拥有and ，而不是拥有.panel--hideand 。隐藏是一种可以在任何块上以完全相同的方式执行的操作，因此我们不是以重复的方式在每个块中实现，而是创建了自己的函数来对任何块进行操作。有点像用编程语言做的。这使块保持干燥。我唯一一次实现隐藏在块本身内的功能是，如果隐藏特定块的方式对于块本身来说是唯一的。.btn--hide<button class="btn u-hide">...</button><article class="panel u-hide">...</article>hidehidehide(panel)
还值得注意的是，“隐藏”也可以表示为一种状态（参见https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md#is-stateOfComponent）。状态的约定是它们以 'is-' 为前缀，如is-hiddenor is-active。我建议阅读http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/，因为它很好地解释了状态和实用程序如何与块一起使用。
于 2015-11-09T10:18:34.880 回答
0
只是一个注释。虽然tadatuta 的答案是完全正确的，并且hide作为一个独立的块并不直接与 BEM 的规则相矛盾，但这是一个坏主意，因为它很可能会破坏关注点的分离。如今，随着最近的快速发展，flexbox许多grid类都定义了display:属性。即，将您的类与hide块混合的结果将取决于您定义块的顺序，即不可预测。
这使得 hide-modifierblock-class--hide成为严格遵循 BEM 时唯一合理的解决方案。
由于封装，这也是一个很好的解决方案。很可能您将有几种隐藏块的方法：visibility:, display:, transform, 而对于 javascript 和应用程序的其余部分，它们都应该表示hidden.
也就是说，有时严格遵循 BEM 可能不是最好的主意。ify.io的回答中已经考虑了这种情况。
于 2021-11-28T06:40:14.527 回答