在尝试创建隔离组件时，将多个css类组合起来是一个好习惯吗？

Question

我已经使用了一段时间＆＃34; BEM喜欢＆＃34;我的项目中的语法。最近，当我看到这个时，我只是重新阅读了一些CSS文章：https://en.bem.info/methodology/css/#single-responsibility-principle

基本上，它不是将header__button的所有样式放在该类中，而是继承button类的样式。我们在这种情况下是否将标题的元素与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更改部分代码，也许是{{1} }类将被打破。在另一种情况下，如果我们在Sidebar和Menu两个类中重复代码，我们就会违反在问题乞讨时讨论的SRP（单一责任原则）。最近，在我的项目中，我一直偏爱代码重复，因此我会将Sidebar所需的所有代码写入Sidebar类。

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

Answer 1

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

在您的示例中，我Sidebar天应该对Menu定位负责，但它不应该对Menu__item知道任何事情。而Menu反过来对它自己的定位一无所知，但应把它的内容放在里面。

如果您真的需要在Menu__item定位中更改内容Sidebar内的.Menu { } .Menu__item { } .Sidebar { } .Sidebar .Menu__item { } 使用嵌套选择器：

// tried these but doesnt work for what I want to do
va.labelOffset = -5;
va.position = "bottom";
va.inside = false;

Answer 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 { }