css - 与 BEM 修改器混淆

Question

我已经开始使用 BEM methodology在编写我的 CSS 时，很少有我努力寻找做某件事的最佳方法的情况。

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

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

.panel {}

.panel__titlebar {}

.panel__content { display: none; }

面板可以是无 Chrome 或 Chrome 的。所以我为面板定义了另一个修饰符类:

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

现在让我们说，面板可以处于全屏/最大化状态，其中镶边和标题栏也会消失。与其为面板和标题栏定义修饰符，不如在父级(比如面板——全屏)上定义修饰符，其余元素应相应更改。所以现在我的 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，这是一种不好的做法。

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

谢谢

Answer 1

答案取决于很多因素。

首先，有多少逻辑和外观有“panel--with-chrome”和“panel--fullscreen”修饰符。以及这种逻辑是什么类型。

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

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

但是，如果您使用的框架不允许方便地表达这种 react ，那么这个答案对您来说就不会那么有效。

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

综上所述，没有通用的解决方案和严格的规则可循。您应该自己决定什么对您的情况有用。这个决定应该取决于很多事情:

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

等等……