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

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

假设我正在使用 BEM 样式编写面板组件 CSS。所以我的 CSS 可能如下所示：

面板可以是无镀铬的或镀铬的。所以我为面板定义了另一个修饰符类：

现在可以说，面板可以处于全屏/最大化状态，其中 chrome 和标题栏也会消失。不要为面板和标题栏定义修饰符，明智的做法是在父级（例如面板--全屏）上定义修饰符，其余元素应相应更改。所以现在我的 CSS 变成了：

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

1. 在 JS 中切换panel--with-chrome类和panel--fullscreen类

2. 覆盖面板内的 chrome CSS——全屏类。

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

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

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

谢谢

例如，我有一个带有菜单元素的菜单块：

但是让我们说.menu块包含在另一个块中，.header

在这种情况下如何处理命名？

或者

或者

有人告诉我，我写下面的代码是错误的。我想元素不能包含块及其坏bem

我想过这样写，但它也没有显示层次结构。

这是另一种方式，但对我来说它似乎比上面的例子更糟糕。

我最初编码的方式是错误的吗？如果是这样，为什么，最好的选择是什么。

在我问这个问题之前，这是我所指的代码：

盒子对象

用于在 Bootstrap 中将内容框起来，例如岛屿或小岛。

圆形皮肤

制作圆角。它被几个抽象类使用，例如box。

在对抽象进行蒙皮的代码中，您将编写：

我还有其他扩展框的皮肤，例如灰色、警报和标签。

现在的问题

我正在研究一个按钮对象。但是既然它和box有同样的规则和修饰符，并且可以有同样的round修饰符，我应该把它声明为一个皮肤吗？所有按钮所做的都是为“外观”添加大约四个规则如果它与边距或填充混淆，我会说它应该是一个对象。

在你会写的代码中

或将其调整为更小

保持这种干燥过度吗？让我担心的是按钮是页面上如此常见的元素 - 但实际上它只是扩展了一个对象和我已经编写的修饰符。

假设我必须在 BEM 中定义一个标头块。标题需要一些缩进（填充，边距），但布局应该与组件分开也是一个普遍的理解。

问题是，我应该将缩进指定为标题块 CSS 的一部分，还是应该只由周围的块（布局块或网格）提供？两种方法都有其优缺点。

有人可以面对 asp.net mvc 和 bem ( http://bem.info/ ) 的集成吗？可以介绍示例或教程链接吗？

例如，我有一个名为：

这个块恰好位于标题中，但也可以在任何地方。现在，如果它在标题中，它需要向左浮动并且还有一个边框。如果是这样，这是正确的做法吗：

或根据 BEM：

两者哪个更好？

我只是了解 OOCSS 方法论。因为我认为它使一切更容易理解，我也在尝试使用 BEM 命名约定。

使用这个原则，我正在尝试为主页创建导航 - 基本上只是一个内联列表。由于 OOCSS 是关于抽象的，所以到目前为止我创建了这个 CSS：

我尽量不使用类名nav，比如navigation我第一次尝试在应用皮肤之前布局结构 - 这就是我的实际问题开始的地方。

要添加一些颜色，更改字体大小等，我可能只是将其添加为修饰符，例如.horizontal-list--nav. 另一个修饰符可能是面包屑导航：.horizontal-list--breadcrumb. 这样可以吗？

对我来说这是合乎逻辑的，因为 ie 文本颜色与列表本身是内联的无关，但列表是例如面包屑，但我不确定我是否从错误的方向接近这个东西。

此外，该列表的 HTML 看起来像这样：

是的li一个元素horizontal-list，这很清楚。但是a嵌套在 中的东西li呢，我该如何标记呢？根据OOCSS原则，我不应该这样做

正确的？但是添加一个类似的类在horizontal-list__item__item某种程度上似乎也很错误。我该如何正确地做到这一点？

我一直在一个项目中使用 BEM 来保持我的 CSS 更加模块化，并且遇到了一些我觉得需要澄清一下的情况：

上下文相关的样式。我不断遇到需要根据父项上的类更改模块/组件的样式。

假设我正在设计产品列表。我有我的.product-list组件，里面有我所有.product-list__item的。然后.product-list__item's 可能有一个<h3>inside 作为产品标题。

我的问题是：

• 也应该.product-list__item有一个类.item？

• 产品内的标题是否应具有以下类别：

• • .item__title?
• • .product-list__item__title?

假设该商品内部还有一个描述框，其中包含价格：

• 描述应该有：
• • .item__description?
• • .product-list__item__description?

• 价格应该有：

• • .item__description__price?
• • .description__price?
• • .price?

我做子组件有点需要单独添加自己的组件名称，即：.item或.description。我猜他们需要它们，因为他们在哪里可以应用他们的样式？

另外，如果我有上述内容，我将拥有一个.product-list听起来不错的组件，但是如果子组件将它们自己的组件名称添加为一个类，.item那么它本身就不是很具有描述性，是吗？

我知道它们可能听起来很复杂，但我很想在这里感到困惑，并且很想听听您的意见。我已经阅读了大量关于 BEM 的文章，但没有一篇解释过这类事情。

尼尔

我有一个小问题，搜索尚未产生任何结果。但它是不断出现的东西。

我正在使用 SASS pre 来处理 @at-root 根，以便我可以执行 BEM CSS 语法。

我有以下 SCSS：

图标修饰符类的预期输出是：

但相反，我得到：

--icon 未应用于第一个父选择器。应该是吗？还是我不了解@at-root 的全部工作原理？

任何想法或反馈将不胜感激。

是的，整个事情必须用两个父选择器包装。