BEM：何时使用混合或修饰符？

编程问答 2022-06-01

问题描述

我有两个案例让我感到困惑 1 个案例 我们在页脚、页眉和联系人页面上使用了 .contacts 块

.contacts
    .contacts__item
        .contacts__link

在每种情况下，其元素位置和样式都略有不同。为了定位，我混合

.contacts.header__contacts
    .contacts__item
        .contacts__link

但是如何设置元素的样式？ 我们不能将 header__item 和 header__link 混合使用，因为在 header 中已经存在具有此类类的现有元素。

1)我们可以制作空的mix类

  .contacts.header__contacts.header-contacts
     .contacts__item.header-contacts__item
         .contacts__link.header-contacts__link

我曾经这样做过。但最近我不喜欢这种方法。这个类看起来像是假装是 2 个类。并且还创建了另一个块，我们不会在其他任何地方使用它来添加化妆品，这似乎不是正确的事情。

2) 我们可以在每种特定情况下为每个元素创建修饰符。但是我们最终得到了大量的修饰符，其中大部分只使用了一次。

3)我们可以用级联为块和样式做一个修饰符

.contacts.contacts--theme--header.header__contacts
    .contacts__item
        .contacts__link
.contacts--theme--header .contacts__link {
}

它违背了 bem 的想法，但我最喜欢它。

2.case 我们有基本的卡块

.card
  .card__img
  .card__inner
     .card__title
     .card__content
  .card__btn

假设我们在目录中使用它，也在投资组合页面中使用它，但稍作修改。 我认为创建空的组合组合卡是不好的，因为我们与上下文联系在一起。如果这张修改后的卡片将在其他地方使用怎么办。那么单词组合本身将是无用的和分散注意力的。

混合Portfolio__img、portfolio__inner 等也很糟糕，因为我们需要在卡片的上下文中而不是整个投资组合块中更改元素。

所以我得出的结论是，给卡片抽象修饰符是最好的

.card.card--type--1
   .card__img
   .card__inner
       .card__title
       .card__content
   .card__btn

.card--type--1 .card__img{
}

因此，当我们需要将块定位在另一个块的上下文中或组合项目中使用的独立块的样式时，混合似乎很有用。我们不应该仅仅为了应用外观变化而动态创建它们。 级联在这种情况下非常有用，尽管它再次使用 BEM 方法。

有理有据的批评和您对此事的想法将非常令人欣慰。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bemhtml