这是我在使用 BEM/SMACSS 的 CSS 架构中遇到的很多情况。我想看看其他开发人员如何处理它。

您有一个跨多个站点使用的 CSS 模块库。.btn-group,.nav-tabs等模块

然后，您会遇到一个以非常特定于站点的方式设置样式的模块——它太独特而无法使用您的库模块之一。

因此，您在 Sass/Less 文件中拥有该“站点模块”的代码，并将其与该站点的其他样式代码一起保存，例如布局样式。它没有与您的“库模块”一起保存。

我的问题是：你有没有做任何事情来区分“站点模块”和“库模块”？

我只是想在 SASS 中使用“修饰符”和“元素”BEM 语法。

CSS 文件编译正确，但是当我尝试运行“grunt serve”罗盘时会抛出以下错误：

使用 BEM 方法，假设我有两个这样的课程：

.staff__teacher

和.staff__teacher--professor

在教授的标记中，是有两个课程还是只有修改后的课程？

<div class='staff__teacher staff__teacher--professor'></div>

或者

<div class='staff__teacher--professor'></div>

从我的角度来看，选择后者似乎更有意义，因为它更精简且更易于阅读。

在 Sass 中，可以通过简单地扩展类来创建.staff__teacher类

但是，在我在 BEM 上看到的大多数教程中，这两个类都添加到了标记中。有人可以帮助我了解一种方法是否比另一种更可取吗？使用我的方法可能会导致任何问题吗？

大多数 CSS 方法都有可重用模块的概念——BEM 将它们称为块，而 SMACSS 和 OOCSS 将它们称为模块。他们都建议使用类创建模块，例如

现在，如果我的 HTML 标记中有两个或更多房间实例，我该如何区分它们？我一直在做这样的事情：

但是我在任何方法中都没有找到模块标识的概念。我只看到模块修饰符或子类的概念，即创建具有扩展外观和/或行为的模块，例如room-kitchen. 但这不是我在这里所做的——我所做的只是创建同一个模块的两个实例并使用标识将它们放置在不同的位置。我没有看到任何关于模块实例以及如何命名它们的方法论。我错过了什么吗？

我们正在广泛使用 BEM，但遇到了几种构建和命名组件的方法，并希望对最佳实践提出意见。我们将“对象”的概念用于可重用组件（例如.box、.media、.btn），将“组件”用于设计的 UI 组件，这些组件往往是对象的组合。

作为该问题的一个示例，请从线框图中考虑：

比图像的想法与可用于该特定项目的其他图像的数量重叠。

至少有两种方法可以处理这种布局，我们正在努力找出最佳选择。

选项1

在标记/CSS 中应用布局，而不是作为组件。然后可以在项目之间重用以下所有样式；没有一个是特定于项目的。

HTML：

CSS：

选项 2

将此实现为由图像和计数框组成的组件。

HTML：

CSS：

相同的 CSS 将适用于box/box--rounded并且对于项目之间的重用是通用的。该组件将仅为该项目定义：

想法，意见和其他想法都非常受欢迎！

在 BEM 中，我知道对于修饰符，两个破折号是有意义的，这样您就可以区分修饰符my-block-my-modifierwith my-block--my-modifier。

但为什么要使用block__element而不是block_element？

我试图了解和理解 CSS 命名约定（如 BEM 或 SUITCss）背后的原因。在存在 SCSS 的情况下，我很难理解后代类名的价值。

例如：

有了在 SCSS 中嵌套规则的能力，我看不出有什么令人信服的理由让我在我的代码中包含祖先类名。上面我定义了应该只用于“菜单”内的“项目”的样式，使用后代类名。但是，嵌套结构已经传达了这一点！menu__item 的规则无论如何都只适用于菜单下的项目，那么为什么我需要在类名中包含它呢？

为什么不：

我知道后代命名约定更明确，也许对未来更友好。然而，我认为它只是在 html 中更加明确。如果我想咨询如何构建这个“菜单”模块，我可以参考 CSS 并清楚地了解菜单是如何嵌套其中的项目的。

我想一个可能的优势是我可以编写非嵌套的 css，如下所示：

然后在任何地方使用“menu__item”，它仍然会在类名中明确表明这是菜单下项目的样式..但是为什么将它定义为菜单的后代呢？（我想，另一个优点是如果没有嵌套，CSS 标识符字符串会更短）

在我看来，如果一个类名被用作另一个类名的后代，那么 SCSS 中的嵌套可以实现这一点并清楚地呈现该逻辑。那么为什么需要这种 BEM 语法呢？

我想听听有人解释这种约定的原因。我想坚持所谓的最佳实践，但在不完全理解约定的情况下，我很难盲目地这样做。

注意：我使用模块这个词，在 BEM 中称为块。还使用修改后的 BEM 命名约定BLOCK__ELEMENT--MODIFIER，请在您的答案中也使用它。

假设我有一个.btn看起来像这样的模块：

我需要创建一个内部有一个.popup-dialog模块.btn：

在 SMACSS 和 BEM 中，您应该如何处理在模块内部定位模块？

在您的回答中，请确定正确的解决方案，并分析以下方法：（请注意，以下所有示例均基于或修改上述 CSS）

方法一

[覆盖内部的原始.btn类.popup-dialog]

CSS：

标记：

方法二

[在里面添加一个子类.popup-dialog]

CSS：

标记：

方法 3

[.btn带有修饰符的子类]

CSS：

标记：

方法 4

[.btn具有布局类的子类]

CSS：

标记：

我想知道是否有任何使 CSS 变得丑陋的 Grunt 任务？就像在 GMail 代码中一样——所有的类名都是随机的 2-3 个字母。

我正在使用 AngularJS 和 grunt-angular-templates Grunt 任务将 views/ 文件夹中的所有模板连接到单个templates.js $templateCache 文件，我想让这个文件尽可能小。

我有index.html、main.css和views/文件夹，里面有一堆 HTML 文件——我想丑化所有这些文件中的所有 CSS 类名，因为我使用 BEM 类名表示法，所以我的 CSS 类名相当长。

阅读 BEM CSS 并编写了一些小型网站，我对此非常熟悉。但是，我仍然不确定如何处理非常相似但没有关系的块。

假设我有很多无序列表块，它们的第一行都有相同的样式。其他列表项可以以不同的方式布局，并且彼此完全不相关。

我发现自己将块命名为它是什么（例如“最新消息”、“即将发生的事件”），然后在 CSS 中堆叠所有这些块变得很麻烦——更不用说难以管理了。

欣赏这些东西不是一刀切的解决方案；但想象一下，很多人都会遇到同样的问题。将这些块称为“标准列表”然后将列表项作为块不是更有效吗？

似乎与 BEM 试图实现的整个原则背道而驰。我应该能够将“最新消息”放在任何我想要的地方。这样我就必须获得包含最新新闻内容的正确“标准列表”？

希望这不会太混乱！任何建议都会很棒！