如何在 Aurelia 视图中反映 BEM 块

Question

我即将开始一个使用 Aurelia 的新项目，我正在考虑将其与 CSS BEM 方法结合使用。

第一个问题：这是否基本上被认为是一个很好的匹配，或者是否有任何替代方案 "fit" 与 Aurelia 更好？

主要问题：

最好用一些自定义 Aurelia 视图（应用程序 header）的示例进行解释：

<template>
    <div class="AppHeader">
        <span class="AppHeader-logo"></span>
        <span class="AppHeader-text"></span>
        <app-menu></app-menu>
    </div>
</template>

当嵌入到另一个视图中时，这会导致结果 DOM 像这样（简化）：

<app-header>
    <div class="AppHeader">
        <span class="AppHeader-logo"></span>
        <span class="AppHeader-text"></span>
        <app-menu>
                    <!-- ... -->
        </app-menu>
    </div>
</app-header>

显然，带有 AppHeader class 的包装器 div 有点多余，因为还有 app-header 标签。不幸的是，似乎无法将 CSS class AppHeader（BEM 需要）分配给视图的基本元素（template 中的标记查看文件）。

是否有任何我不知道的替代方法，或者是否认为 "good" 实践（或至少可以接受）在视图中包含许多包装元素，这些元素以某种方式使 DOM 膨胀？

Answer 1

我相信即使有一百个额外的 DOM 节点对于现代浏览器来说也不是问题，但如果避免它们真的很重要，您可以尝试自定义标签而不是类（请参阅限制列表这里 https://en.bem.info/methodology/faq/#why-are-custom-tags-not-used-for-blocks-in-bem).

Answer 2

也许 @containerless 可以解决您的问题：

在您的视图模型中：

@containerless
export class AppHeader {
  ...
}

这样，<app-header>容器就不会被渲染了。

如果您的组件是 view-only 组件，您可以在 <template> 标签中声明 containerless：

<template containerless>
    <div class="AppHeader">
        <span class="AppHeader-logo"></span>
        <span class="AppHeader-text"></span>
        <app-menu></app-menu>
    </div>
</template>

Answer 3

我刚刚意识到，将自定义类放在自定义元素本身（template）上确实有效，所以我可以简单地写这样的东西：

<template class="AppHeader">
    <span class="AppHeader-logo"></span>
    <span class="AppHeader-text"></span>
    <app-menu></app-menu>
</template>

编辑/附加信息

如果视图是路线的 "base view"，这将不起作用，因为 template 元素在这种情况下根本不会呈现，而是被 router-view元素。

如何在 Aurelia 视图中反映 BEM 块

How to reflect BEM blocks in Aurelia views

css

bem

aurelia