与BEM修饰符混淆

Question

我在编写CSS时已经开始使用BEM方法,并且很少有我努力找到做特定事情的最佳方法.

我想在这里举一个简单的小组例子.

让我们说我正在使用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; }

要在全屏模式下删除镶边,我可以:

首先是不好的,因为理想情况下我只想在JS中切换一个类(.panel - 全屏)来切换全屏模式.

第二个是糟糕的,因为我将不得不覆盖以前的CSS,这是一个不好的做法.

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

谢谢

Answer 1

答案取决于很多事情.

首先,有多少逻辑和外观有"panel-with-chrome"和"panel-fullscreen"修饰符.而且这种逻辑是什么样的.

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

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

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

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

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

等等...