与 BEM 修饰符混淆

Question

我在编写 CSS 时已经开始使用 BEM methodology，并且在少数情况下我很难找到做某件事的最佳方式。

我想在这里举一个简单的面板示例。

假设我正在使用 BEM 样式编写面板组件 CSS。所以我的 CSS 可能如下所示：

.panel {}

.panel__titlebar {}

.panel__content { display: none; }

面板可以是无镀铬的，也可以是镀铬的。所以我为面板定义了另一个修饰符类：

.panel--with-chrome {
 border: 4px solid black;
 border-radius: 4px;
}

现在让我们说，面板可以处于全屏/最大化状态，其中 chrome 和标题栏也会消失。不要为面板和标题栏定义修饰符，明智的做法是仅在父级（例如面板--全屏）上定义修饰符，其余元素应相应更改。所以现在我的 CSS 变成了：

.panel--fullscreen {
 /* something has to be done here */
}

.panel--fullscreen .panel__titlebar { display: none; }

要在全屏模式下删除 chrome，我可以：

1. 在 JS 中切换 panel--with-chrome 类和 panel--fullscreen 类

2. 覆盖 panel--fullscreen 类中的 chrome CSS。

第一个不好，因为理想情况下我只想在 JS 中切换一个类 (.panel--fullscreen) 来切换全屏模式。

第二个不好，因为我必须覆盖以前的 CSS，这是一种不好的做法。

那么最好的方法是什么？感谢您的 cmets。

谢谢

Answer 1

我会选择第一个选项；毕竟，您正在切换状态，因此您需要相应地添加/删除/切换类。这比在 CSS IMO 中撤消大量内容要好。

Answer 2

答案取决于很多事情。

首先，有多少逻辑和外观有“panel--with-chrome”和“panel--fullscreen”修饰符。还有这个逻辑是什么。

如果“panel--with-chrome”带来了很多 CSS 属性和特殊的 JS 功能，我会在应用“panel--fullscreen”时在 JavaScript 中切换它。
它还取决于您使用的 JavaScript 框架。在我们在 Yandex 使用的“i-bem.js”中，很容易对附加修饰符做出反应：

• A square changes size modifier when after a click
• Reacting on applying a modifier

但是，如果您使用的框架不允许方便地表达这样的反应，那么这个答案对您来说不会那么好。

在另一种情况下，当“panel--with-chrome”没有太多属性并且没有为页面带来任何 JavaScript 逻辑时，我会在“panel--fullscreen”类中重新定义这些 CSS 属性。

总而言之，没有通用的解决方案和严格的规则可以遵循。您应该自己决定什么对您的情况有用。这个决定应该取决于很多事情：

• 如果您希望将来维护您的项目，哪种解决方案更容易支持？
• 您使用的 JavaScript 框架的功能
• 性能的东西
  不是在这种特殊情况下，但有时我们会测量我们选择的变体的渲染速度。
• 其他人的意见，如果你在团队中工作
• 项目的文件结构
  在 Yandex，我们将块的 CSS 和 JavaScript 存储在同一个块文件夹中。因此，在 CSS 和 JavaScript 之间共享逻辑不是问题，因为它们都在一个地方。
  但是，如果您将 JavaScript 文件分开保存，这可能会影响支持共享逻辑的舒适度。

等等……