Question

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

第一个问题：这基本上被认为是一个很好的匹配，还是有任何与Aurelia“更合适”的选择？

主要问题：

最佳解释了一些自定义Aurelia视图（应用标题）的示例：

<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>

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

有没有其他方法我不知道或者它被认为是“好”的做法（或至少可以接受）在视图中有许多包装元素以某种方式膨胀DOM？

Answer 1

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

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

修改/补充信息

如果视图是＆＃34;基本视图＆＃34;这不会起作用。一个路由，因为template元素在这种情况下根本不会被渲染，但被router-view元素替换。

Answer 2

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

Answer 3

也许@containerless会解决您的问题：

在您的视图模型中：

@containerless
export class AppHeader {
  ...
}

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

如果您的组件是仅限查看的组件，则可以在containerless标记中声明<template>：

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

如何在Aurelia视图中反映BEM块

3 个答案: