12

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

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

假设我正在使用 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. 覆盖面板内的 chrome CSS——全屏类。

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

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

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

谢谢

4

2 回答 2

14

答案取决于很多事情。

首先，有多少逻辑和外观有“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 文件分开保存，这可能会影响支持共享逻辑的舒适程度。

等等...

于 2013-01-01T10:57:39.617 回答
2

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

于 2012-12-30T18:13:37.037 回答