问题标签 [bem]

我想重构现有代码并实现 BEM 命名约定。

但是我在将代码转换为符合 BEM 约定/要求的标记时遇到了困难，尤其是嵌套元素。

我正在寻找以下问题的答案：

1. 在 BEM 方法中命名嵌套元素的正确方法是什么？
2. 我应该如何命名元素以使其在修改/嵌套中扩展并保持可重用？

现有代码：（小提琴：http: //jsfiddle.net/karltynan/msavvhp9/）

尝试的代码：（小提琴：http: //jsfiddle.net/karltynan/hd7r0n3a/）

我最近玩过 BEM 语法，我想知道 CSS 中可链接性的使用，因为我尝试使用class=*^&class=*选择器以获得更自由的 CSS 类顺序。

例如：

以便

或者

会是相似的。

还有什么比以下更具可读性：

这个人使用的是相同的概念，但每个人似乎都不同意，同时没有为他们的论点提供真正的来源（慢？反html符合？反语义？）。

那么有理由不使用这种语法吗？

我正在一个使用 SCSS 的项目上试验 BEM 语法。我的编辑器是 Sublime Text 3，我正在使用 SCSS 语法高亮。

我遇到的问题是，当我按照Mike Fowler 的这篇文章&使用父选择器嵌套时，Sublime 将其突出显示为红色。这是一个例子：

代码编译得很好，我只是希望 Sublime 不要将这些标记为错误。

任何人都可以帮助配置 Sublime 来做到这一点吗？

我正在使用 Sass 3.4.1 和 BEM，所以我的 scss 是：

我希望每次将鼠标悬停在.photo-of-the-day标题发生的事情上，这很常见，所以通常在 css 中：

问题是使用 BEM，这是我找到的唯一方法，看起来有点难看

所以我想知道我是否可以继承.photo-of-the-day选择器并在悬停中使用它以避免再次复制完整的选择器。

理想情况下是这样的：

或者接近回归到 BEM 的父选择器的东西。可能吗？

如下例所示，在同一个 DOM 节点上使用元素和块类名是否正确？

谢谢。

我已经阅读了很多关于 camelCase 和 Underscore 命名约定的优缺点的文章。我一直更喜欢camelCase，主要是因为它可以节省字节。

但是学习 BEM，我真的很困惑。BEM 命名更具可读性，但 '_'、'__' 和长名称会增加文件大小。我也找不到任何 js 插件。那么哪一个更适合合格的网页呢？

PS抱歉英语不好。任何意见表示赞赏

我和我的团队已经开始实施类似 BEM 的东西（我们以这篇文章为起点）。到目前为止，我所读到的似乎是有道理的。我正在考虑的一个大问题是如何为修改后的组件设置样式。

例如，假设我有.avatar和.avatar--alternate组件/修饰符。也许交替的背景是黑色而不是白色。我应该使用什么 CSS 选择器来设置备用标题的样式，为什么？

我在这里列出了场景：

我的直觉告诉我 B，因为我这是最不具体的标题样式方式，并且似乎是最“可扩展”或“面向未来”的。另一方面，A 非常引人注目，因为我可能也有.avatar-subHeading，也许在某些段落中我可能会开始患上类炎（？）（例如<h1 class="avatar-heading avatar-heading--dark">）

我想在我的 Sass 库中实现类似于 BEM 模型的东西。但我正在努力寻找一种干净的方法来做到这一点。

例如，我想为一个通用元素声明一个“基本”样式，然后用有用的变体对其进行扩展：

这里的问题是生成的.container-featured类只包含边框属性——Sass 不包括其“父”类的边距和背景。

因此，您最终不得不在标记中的类上加倍以获得所需的结果：

是否有某种方法可以将父类中的属性拉到该修饰符类中，这样您只需在标记中引用修饰符类就可以获得相同的视觉结果？

我试过使用mixins来做到这一点，但事情很快就会变得冗长和重复：

是否有一种简单、干净的方法可以使用 Sass 实现这一目标？

我想过用这样的 BEM 树构建一个网格：

• 网格
• 网格__行
• 网格__列组
• 网格__列

还有像这个预告块这样的内容

• 预告片
• 预告片__缩略图
• 预告片头条
• Teaser__body
• 预告片链接

如果我想在网格的不同列中显示预告片元素，它会引导我使用以下标记：

我刚开始使用 BEM，这感觉有缺陷，因为不同块的样式会相互影响。

这是正确的处理方式吗？对更好的解决方案有什么建议吗？

有很多 CSS 的模块化解决方案。我在主题中列出了一些，但可能已经有更多了。您如何选择哪一个用于您的新项目？有比较吗？