css - 将 BEM CSS 与 Angular 指令结合使用

Question

我一直在使用 BEM 样式 CSS 来设计我的 Angular Directive(指令)，并且通常使用 Replace: true 来使我的 block 级类可以位于自定义元素的“根”上。这使得我可以主要使用类来编写所有 CSS。

但是，replace: true 有时会导致问题(有两个 ng-if 等)，现在已被标记为已弃用。所以我开始尝试完全远离替换。

但是现在我在将 BEM 应用于这些具有实际自定义标记 DOM 的元素时遇到了麻烦 - 现在我必须使用标记名称而不是类名称，这意味着我不能再真正使用 BEM (因为我必须使用标签名称，因为我无法将类直接应用于模板中的元素)。此外，在我的自定义元素上使用修饰符现在似乎是不可能的，就像使用同级 CSS 选择器一样。

这是一个示例，希望能够说明我的意思:

指令:

angular.module('my.module')
  .directive('customElement', function() {
    return {
      restrict: 'E',
      scope: {
        isSpecial: '='
      },
      template: '<div class="custom-element" ng-class="{\'custom-element--special\': isSpecial"></div>'
    };
  });

CSS:

.custom-element {
  background-color: white;
}

.custom-element--special {
  background-color: red;
}

.custom-element--special + .custom-element--special { // this won't work without replace: true
   background-color: blue;
}

如果我使用replace: true，一切都会按预期工作(但随之而来的是它自己的头痛)。

如果我不使用替换，这些类不会应用于根自定义元素，因此子选择器不起作用。

我总是可以向 postLink 函数中的元素添加类，但这会使模板变得不太清晰。

有人有使用 Angular 的 BEM 并在自定义指令中使用类而不是标签名称的经验吗？为了解决这个问题你做了什么？

Answer 1

我知道出于可读性目的而使用 replace:false 是一个问题。

实际的问题是我们需要 OOCSS但是您正在处理带有 CSS 对象的自定义标签的 Angular 组件，但情况并非如此。

对此没有实际的解决方案，我不会建议您开始在 postLink 函数上添加类。

然而，我们习惯做的是将自定义标签视为除了内部对象结构之外的自己的 CSS 对象。迫使我们为自定义标签实现额外的 CSS 类。

block-context
  block-context__element 
    custom-element

当block-context__element是一个多余的类时为什么要这样做？

• 由于 BEM 结构的其余部分是您将维护的结构，因此 custom-element block 本身应该具有意义，而 block-context__element 元素则没有意义预计，您应该从指令的实现中抽象 CSS 对象，如果您在某个时候开始更改您的 html 组件，您的类仍然应该适用。

希望这个回答对你有帮助