Bem 名称变得太长 - 最佳实践

Question

我有以下 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 吗？

Answer 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 这样的简单 class 就足够了。
如果可以重复使用某些东西，请将其设为 block，而不是 element。
对于布尔修饰符，该值不包含在名称中。

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

Answer 2

这些名字并不太长。有时，当名称变得太长时，那是因为该页面中发生的事情太多。当我在 angular 中看到（例如）我考虑提取组件时，您可以从现有的 css 类中砍掉块和元素名称的一半，并用更短的块替换名称。当您将大量不相关的复杂性移动到不同的组件时，它使 parent 组件更容易阅读。好的候选者可能包括

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

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

Bem 名称变得太长 - 最佳实践

Bem names getting too long - best practice

html

css

naming-conventions

bem