将 BEM CSS 与 Angular 指令一起使用

Posted 2023-03-06

【中文标题】将 BEM CSS 与 Angular 指令一起使用

【英文标题】：Using BEM CSS with Angular Directives

【发布时间】：2015-07-11 09:08:27

【问题描述】：

我一直在使用 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 并在自定义指令中使用类而不是标签名称的经验？你是怎么解决这个问题的？

【参考方案1】：

我知道 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 组件，您的类应该仍然适用。

希望这个回答对你有帮助