Question

我正在使用BEM处理我的第一个项目。我很喜欢它，但我只能做一件事：为更大的模块嵌套解决方案。我已经搜索了很多关于这个的内容，stackoverflow上有很多主题，但是这些例子都很明显。在真实的＆＃39;世界并非一切都可以看作是单独的模块。

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

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

现在我明白我可以将它拆分为不同的子模块。像这样：

timeline
timeline__bar
timeline__bullet
timeline__label-year
timeline__label-month
timeline__article  article

article__image
article__title
article__subtitle
article__link

但这只有在文章是自己的“东西”时才有意义。但就我而言，这是一篇特定的时间轴专题文章。并且名称＆＃39;文章＆＃39;太通用了。

我也可以这样做：

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中，真的不像“大模块”。您应该将模块拆分成较小的位，这样它们就可以在其他地方重用。您分别使用article和timeline的示例很好。

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

或者，您可以尝试使用修饰符。如果article timeline与article内部的blogpost略有不同，我们会尝试page-header，http://getbem.com/faq/#block-modifier-affects-elements

我在学习BEM时遇到了同样的问题。不幸的是，大多数示例都有简单的块，例如block或<filter> <filter-name>IDPFilter</filter-name> <filter-class>org.picketlink.identity.federation.web.filters.IDPFilter</filter-class> </filter> <filter-mapping> <filter-name>IDPFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>。

Answer 2

如果您觉得处理过于繁琐，可以使用@import将模块分成更小的部分。例如，为了便于参考，请查看Chris Coyier's Codepen's CSS post。

至于你选择的首选命名惯例，我会选择第二个（即timeline__和article__），但你只需要通过耳朵播放它对你而言。

解决效率问题，您使用的是SASS pseudo-nesting的BEM吗？这样可以更容易地写出BEM命名法。

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

吸收以上几个链接提供的内容让我喜欢编写CSS ...

如何在大型模块中处理BEM？

2 个答案: