尝试创建隔离组件时组合多个 css 类是一种好习惯吗？答案

【问题标题】：Is a good practice to combine multiple css classes when trying to create isolated components?尝试创建隔离组件时组合多个 css 类是一种好习惯吗？
【发布时间】：2017-04-27 11:04:30
【问题描述】：

一段时间以来，我一直在我的项目中使用“类似 BEM”的语法。最近在重温一些CSS文章的时候看到这个：https://en.bem.info/methodology/css/#single-responsibility-principle

基本上，它不是将header__button 的所有样式都放在该类中，而是从button 类中继承样式。在这种情况下，我们不是将 header 的 element 与 button 类耦合吗？这意味着，如果将来我们要更改 button 类，我们还需要准确记住我们在哪里使用这个类。

在这个例子中可能是有意义的，因为你试图拥有相同的样式，但是布局组件呢？例如，假设我有一个 Menu 类可以垂直放置一些孩子，我有一个 Sidebar 类也会对这些孩子应用一些样式。我们像这样使用它们：

menu.css

Menu {
}
Menu__item {
}

sidebar.css

Sidebar {
}
Sidebar__item {
}

index.html

<div class="Menu Sidebar">
  <div class="Menu__item Sidebar__item">
  </div>
  <div class="Menu__item Sidebar__item">
  </div>
</div>

如果我们不将所有关于如何定位项目的代码放在Sidebar 类中，并且将来我们从Menu 更改其中的一些代码，那么Sidebar 类可能会被破坏。在另一种情况下，如果我们在 Menu 和 Sidebar 两个类中重复代码，我们就违反了在问题的乞求中讨论的 SRP（单一责任原则）。这就是最近，在我的项目中，我一直支持代码重复，所以我会将Sidebar 所需的所有代码写入Sidebar 类。

但是，这里的最佳做法是什么？

【问题讨论】：

标签： css architecture frontend bem

【解决方案1】：

还有一章部分回答了你的问题：https://en.bem.info/methodology/css/#external-geometry-and-positioning

在您的示例中，我认为 Sidebar 应该负责 Menu 的定位，但它不应该对 Menu__items 有任何了解。而Menu 则不应该知道任何关于它自己的定位，而是应该将它的项目定位在里面。

如果您确实需要更改位于 Menu__item 内部的 Menu__item 定位中的某些内容，请使用嵌套选择器：

.Menu {
}
.Menu__item {
}
.Sidebar {
}
.Sidebar .Menu__item {
}

【讨论】：

您说“Sidebar 应该负责Menu 的定位，但它不应该知道任何关于Menu__items 的信息”，但您的代码却相反：.Sidebar .Menu__item {}。我认为Sidebar 不应该更改Menu 块内的任何内容。只有Menu 知道它的结构。
确实如此。首先我说它应该是这样的。最后一段以“如果你真的需要……”开头——这是关于如果你没有其他选择的情况下处理这种情况的方法。当然，在大多数情况下，您最好避免相互依赖。

【解决方案2】：

我认为，您应该决定它是什么：菜单或侧边栏，并使用这些类之一。如果块有点不同，你应该使用修饰符。如果使用修饰符无法做到这一点，请使用两个不同的类。

使用修饰符：

// your menu
.menu { }
.menu__item { }

// your sidebar
.menu--some-modifier { }
.menu__item--some-modifier { }
//
.sidebar__menu {
    // set some styles (margins, positioning) for .menu
}

两个独立的不同块：

// your menu
.menu { }
.menu__item { }

// your sidebar
.sidebar { }
.sidebar__item { }

【讨论】：