3

我一直在使用 BEM 样式 CSS 来设置我的角度指令的样式，并且通常使用 replace: true 以便我的块级类可以位于自定义元素的“根”上。这使得我可以主要使用类来编写我的所有 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 函数中的元素添加类，但这会使模板变得不那么清晰。

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

4

1 回答 1

0

我知道这是replace:false出于可读性目的的问题。

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

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

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

block-context
  block-context__element 
    custom-element

为什么要在block-context__element多余的课程中这样做？

  • 因为你的 BEM 结构的其余部分是你将要维护的，所以custom-element块本身应该具有意义，并且block-context__element元素没有预期，你应该从指令的实现中抽象 CSS 对象，如果你在某个时候开始改变你的 html您的类仍应适用的组件。

我希望这个答案对你有帮助

于 2015-05-01T15:07:49.037 回答