与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;
}

现在我们可以说，面板可以处于全屏/最大化状态，铬和标题栏也会消失。不是为面板和标题栏定义修改器，而是在父级（例如面板 - 全屏）上定义修改器是明智的，并且其余元素应相应地改变。所以现在我的CSS变成了：

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

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

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

1. 在JS中切换 panel - with-chrome 类以及面板 - 全屏类

2. 覆盖面板 - 全屏类中的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”中，很容易对添加修饰符做出反应：

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

但是如果你使用的框架不允许表达这样的反应，那么这个答案对你来说效果不大。

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

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

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

等等......

Answer 2

我会选择第一个选项;毕竟你 切换状态，所以你需要相应地添加/删除/切换类。它比撤消CSS IMO中的大量内容更好。