Bem 名称太长 - 最佳实践答案

【问题标题】：Bem names getting too long - best practiceBem 名称太长 - 最佳实践
【发布时间】：2019-06-01 23:08:42
【问题描述】：

我有以下 HTML 代码，我倾向于在开始时有一个 3 代码项目标识符

<span class="abc-user-overview__header__title"> 
    <span class="abc-user-overview__header__title__name">  
        {{ name }}  
    <span class="abc-user-overview__header__active">true</span>
</span>

虽然 'name' 元素是 title 的子元素，但命名约定必须有多严格？因为我认为 abc-user-overview__header__title__name 太长，宁愿删除 __title，给我：

<span class="abc-user-overview__header__title"> 
     <span class="abc-user-overview__header__name">  
         {{ name }}  
     <span class="abc-user-overview__header__active"true</span>
</span>

这是有效且可接受的 BEM 吗？

【问题讨论】：

标签： css html naming-conventions bem

【解决方案1】：

遗憾的是，根据 BEM 约定，您的代码无效。这是官方名称结构block-name__elem-name_mod-name_mod-val。

这是您的代码，具有有效的 BEM 命名：

<span class="abc-user-overview__title"> 
    <span class="abc-user-overview__name">{{ name }}</span>
    <span class="abc-user-overview__status abc-user-overview__status_active">true</span>
</span>

几点提示：

避免根据内容命名您的块。尝试对可重复使用的块进行通用化。例如，让我们有一个表示列表内容的块。在其中一个页面上，我们可能会显示新闻.news-list，但在其他页面上，我们可能会显示产品，因此重用名称为.news-list 的块与里面的产品不是很好。在这种情况下，像 .list 这样的简单类就足够了。
如果某些内容可以重复使用，请将其设为 block，而不是 element。
对于布尔修饰符，名称中不包含该值。

完整的文档和优秀的例子可以在官网找到：https://en.bem.info/methodology/naming-convention/#naming-rules

【讨论】：

Active 是一个修饰符，有效的类应该是这样的：abc-user-overview__status--active
@Khazl 是的，“active”正是一个修饰符，在我的示例中，我遵循官方 BEM 命名约定。你的也是有效的，但这只是一个不同的约定。从我的答案中的链接中阅读官方文档。 "修饰符值与修饰符名称之间用一个下划线 (_) 分隔。"
非常有趣的变种我不知道，谢谢你的解释。如果我使用 BEM，我一直使用这种方案：getbem.com/naming 我认为它在视觉上更加突出。但是，这就是品味和习惯。
@Khazl 只要您在项目中始终如一地使用它们，两者都是有效的。我的示例来自 BEM 创建者文档 :)

【解决方案2】：

这些名字不会太长。有时，当名称变得太长时，是因为您在该页面上发生了太多事情。当我看到有角度的（例如）我考虑提取组件时，您可以从现有的 css 类中删除块和一半的元素名称，并用更短的块名称替换。当您将大量不相关的复杂性移至不同的组件时，它使父组件更易于阅读。合适的人选可能包括

移动菜单
容器（任何具有响应宽度、填充或图标以折叠或展开某些区域的东西）
页脚
显示一些统计数据的复杂小部件
任何带有标题、照片、描述和超链接的重复卡片。

其中一些组件可能对整个应用程序有用，或者可能只对那个页面有用。等等。

【讨论】：