我正在使用 SMACSS（CSS 的可扩展和模块架构）： http ://smacss.com/

具体来说，我使用的是 Yahoo 的 Pure CSS (SMACSS) 框架（只是 Grids 样式表）： http ://purecss.io/grids/

在模块内放置网格是否正确？

例如，这是一个“foo”模块内的网格。foo 模块应该显示一行三个项目。

或者，从模块中删除网格并编写我自己的 CSS 来实现布局（而不是依赖于网格类）是否更符合 SMACSS 方法。例如：

我是 SMACSS CSS 的新手。我有这门课，它的过渡时间大约为 0.5 秒。每次我想在 div 中添加一些东西，比如动画，我都会附加一个类。那么它应该像布局还是状态？像 l-anim 还是 is-anim？请帮忙。谢谢。

这是我的设置：

文件关系

home.php - 用于概述主页“布局”HTML 的文件：

_layout.scss - 用于设置 home.php 的非导入内容样式的文件：

animation.html - 包含上面导入的名为“动画”的“模块”的 html

_animation.scss - 在animation.html中设置html样式

问题： 我应该如何在 _animation.scss 中封装选择器？

可能性

1.) 我可以像这样在 _animation.scss 中嵌套所有选择器：

2.）我可以通过添加前缀“animation-”（以及相应的html）来命名_animation.scss中的几乎所有选择器

3.) 可以使用子选择器来减少级联，但我怀疑这是最好的，它对 IE 的支持很差

4.) 子类化？但是，我认为这与将模块移动到其他地方更相关，而不是封装它以确保它不会泄漏到其他模块/布局代码中

抱歉问了这么长的问题，说起来很尴尬。非常感谢任何额外的建议或最佳实践知识

在 Nicolas Gallaghers关于 HTML 语义的文章中，他概述了一种以模块化方式构建 html 和 css 的方法（受 BEM 架构的影响）。他举了一个例子，我不完全理解：

• 首先，我不明白的是：实用程序和组件之间有什么区别？
• 这两者之间的符号差异从何而来（实用程序类名以“u-”为前缀）？
• 最后的; 状态和修饰符有什么区别（它们都有单独的符号）？

他在他的文章中没有深入解释这一点，我仍然想了解。所以我希望有人能回答这个问题。

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

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

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

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

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

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

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

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

我想将 SMACSS 命名系统与 SASS 一起使用。期望以下 SASS 代码：

作为输出我会得到

但根据 SMACSS 方法，类命名应如下所示：

您能否建议如何更改 SASS 中的类命名样式以实现此目标？

寻找如何将 SMACSS 命名约定与jade、haml 或 slim 模板引擎一起使用的解决方案。

期待以下玉代码：

作为输出，我将得到以下信息：

但我想达到以下结果：

是否有任何解决方案来管理它，例如我可以在 SASS 中做到这一点，我的意思是避免手动将 'module-' 字符串添加到每个 'child' ？

更新

Haml 和 Slim 也是可接受的解决方案

我试图了解和理解 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：

标记：