BEM中的继承

Question

我手头上有几个滥用BEM的案例，其中块的层次结构从一开始就搞砸了，这导致了很难维护的湿CSS代码。

简单地说：

.about-us {
  &__title {
    font-size: ...; // Same
    font-weight: ...; // Same
  }
  &__content {
    font-size: ...; // Same
  }

  &__faces { ... } // Different;
}

.catalogue {
  &__title {
    font-size: ...; // Same
    font-weight: ...;  // Same
  }
  &__content {
    font-size: ...;  // Same

    &-features { ... } // Different
  }
  ...
}

.catalogue-item {
  &__title {
    font-size: ...; // Same
    font-weight: ...;  // Same
    text-align: ...; // Different
  }
  &__content {
    font-size: ...;  // Same
  }
  ...
}

它假设不同页面的样式可能不同，但几乎所有负责总体网站外观(排版等)的样式都有效地保持不变-或者至少应该保持不变。

特定的样式是否应该继承自常见的样式？E.g

.catalogue {
  &__title {
    @extends .page__title;
    ...

它们应该共存吗？例如。

<div class="page catalogue">
  <h1 class="page__title catalogue__title">...

真实的示例要复杂得多，因此针对代码的特定修复将不起作用。我想知道的是，BEM方法通常是如何解决这种情况的，以及解决这个问题的常见方法是什么。

Answer 1

不，在我的书里没有。这首先会违背BEM的宗旨。

您看，您应该坚持使用BEM的主要原因是:分离关注点。您可以将其称为封装。

如果你开始使用一般的CSS类，你将打破封装，CSS规则将无处不在。这不是你想要的。它将更难维护，因为它将使测试非常，非常，非常 aufwendig和错误容易。

因为您使用的是SASS，所以您可能想要这样做。

$global-font-size-normal: X;
$global-font-weight-normal: Y;
$global-font-size-extra: A;
$global-font-weight-extra: B;

// ...

$about_us-font-size: $global-font-size-normal;
$about_us-font-weight: $global-font-weight-normal;
$about_us_faces-font-size: $global-font-size-extra;

.about-us {
  &__title {
    font-size: $about_us-font-size;
    font-weight: $about_us-font-weight;
  }
  &__content {
    font-size: $about_us-font-size;
  }

  &__faces { 
    font-size: $about_us_faces-font-size;
  };
}

// ... etc.

Answer 2

BEM只描述了你的类名应该是什么；你可以随心所欲地安排你的CSS。正如您已经发现的，使用样式继承将常见样式添加到特定类中效果很好。

<div class="page catalogue">
  <h1 class="page__title catalogue__title">...

在本例中，您的<h1>应该只有catalogue__title类。如果你想要一个看起来像page__title的catalogue__title，你可以在你的CSS中描述它--例如，使用继承。