BEM 中的继承

问题描述

我手头有几个滥用 BEM 的案例，其中块的层次结构从一开始就搞砸了，这导致 WET 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
  }
  ...
}

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

是否应该从通用样式继承特定样式？例如

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

它们应该共存吗？例如

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

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

解决方法

不，不在我的书中。这首先违背了 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.

,

BEM 只描述你的类名应该是什么；你可以随意安排你的CSS。正如您所发现的，使用样式继承向特定类添加通用样式效果很好。

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

在本例中，您的 <h1> 应该只有 catalogue__title 类。如果您希望 catalogue__title 看起来像 page__title，请在 CSS 中进行描述 - 例如使用继承。