大模块中BEM如何处理？

Question

我正在使用 BEM 进行我的第一个项目。我很喜欢它，但只有一件事我无法理解：更大模块的嵌套解决方案。我对此进行了很多搜索，并且有很多关于 Whosebug 的主题，但是这些例子都很明显。在 'real' 世界中，并不是所有东西都可以看作是单独的模块。

例如：我正在构建一个大型时间轴模块。它由一个时间轴栏组成，其中包含项目符号和标签。每个项目符号都有一个文章块，它本身由图像、标题、副标题和 link 组成。

BEM 代码对我来说效率很低：

timeline
timeline__bar
timeline__bullet
timeline__label-year
timeline__label-month
timeline__article
timeline__article-image
timeline__article-title
timeline__article-subtitle
timeline__article-link

现在我明白了，我可以把它拆分成不同的 sub-modules。像这样：

timeline
timeline__bar
timeline__bullet
timeline__label-year
timeline__label-month
timeline__article  article

article__image
article__title
article__subtitle
article__link

但这只有在文章是自己的文章时才有意义'thingy'。但就我而言，这是一篇特定的 timeline-only 文章。 'article' 这个名字太笼统了。

我也可以这样做：

timeline
timeline__bar
timeline__bullet
timeline__label-year
timeline__label-month
timeline__article  timeline-article

timeline-article__image
timeline-article__title
timeline-article__subtitle
timeline-article__link

但这感觉也不对，因为命名接缝太混乱了。这种情况下的最佳做法是什么？

非常感谢。

Answer 1

在 BEM 中，确实不应该有像 "large module" 这样的东西。你应该把你的模块分成更小的部分，这样它们就可以在其他地方重用。您分别使用 article 和 timeline 的示例很好。

BEM 的难点在于命名。虽然 article 是通用的，但 timeline-article 可能更好，但它很长。你要么想出更好的东西，要么就选择长的。

或者，您可以尝试使用修改器。如果 timeline 中的 article 与内部的 article 略有不同，比如说 blogpost，他们会尝试：http://getbem.com/faq/#block-modifier-affects-elements

我在学习BEM的时候遇到了同样的问题。不幸的是，大多数示例都有简单的块，例如 page-header 或 block.

Answer 2

如果您觉得处理起来太麻烦，可以随时使用 @import 将模块分成更小的部分。例如，为了便于参考，请查看 Chris Coyier's Codepen's CSS post.

至于你选择的更可取的命名约定，我会选择第二个（即 timeline__ 和 article__），但你只需要见机行事什么对你有用。

解决效率问题，您是否将 BEM 与 SASS pseudo-nesting 一起使用？这将使写出 BEM 命名法变得容易得多。

说到结构化 CSS，我还建议查看 Harry Robert's ITCSS。

吸收了上面提供的几个链接让我爱上了写作CSS...

大模块中BEM如何处理？

How to deal with BEM in large modules?

html

css

sass

bem