用于命名多个复杂修饰符的 BEM 约定 [关闭]答案

【问题标题】：BEM convention for naming multiple complex modifiers [closed]用于命名多个复杂修饰符的 BEM 约定 [关闭]
【发布时间】：2020-05-23 22:44:00
【问题描述】：

我一直困惑于找到命名多个修饰符的最佳方式，我知道这种方法的基本规则，并且我阅读了官方的 BEM 快速入门文档 (bem.info/methodology/quick-start)

当我在一个块中有一些修饰符时，我遇到了命名修饰符的问题，其中一个修饰符对另一个修饰符有一些影响（换句话说，一个修饰符除了修改主块之外，还修改了该块的另一个修饰符)

我没有解释问题，而是针对这种情况使用了一个简单的示例，所以请告诉我以下示例中哪一个是正确且最佳的选择：

解决方案 1)

SCSS：

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;
    }
    &--outline#{&}--primary {
        border: 1px solid blue;
    }
    &--outline#{&}--secondary {
        border: 1px solid black;
    }
}

编译的 CSS：

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline {
  background: transparent;
}
.btn--outline.btn--primary {
  border: 1px solid blue;
}
.btn--outline.btn--secondary {
  border: 1px solid black;
}

HTML 中的使用示例：

<a href="#" class="btn btn--primary btn--outline>...</a>

解决方案 2)

SCSS：

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;
    }
    &--outline#{&} {
        &--primary {
            border: 1px solid blue;
        }
        &--secondary {
            border: 1px solid black;
        }
    }
}

编译后的 CSS 同方案一

HTML 中的使用示例也与解决方案 1 相同

实际上我只是在修饰符中做了一个嵌套，以防止重复“轮廓”，

解决方案 3)

SCSS：

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        background: transparent;

        &--primary {
            border: 1px solid blue;
        }
        &--secondary {
            border: 1px solid black;
        }
    }
}

编译的 CSS：

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline {
  background: transparent;
}
.btn--outline--primary {
  border: 1px solid blue;
}
.btn--outline--secondary {
  border: 1px solid black;
}

HTML 中的使用示例：

<a href="#" class="btn btn--outline btn--outline--primary">...</a>

解决方案 4)

SCSS：

.btn {
    font-size: 14px;

    &--primary {
        background: blue;
    }
    &--secondary {
        background: black;
    }
    &--outline {
        &--primary {
            background: transparent;
            border: 1px solid blue;
        }
        &--secondary {
            background: transparent;
            border: 1px solid black;
        }
    }
}

编译的 CSS：

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--secondary {
  background: black;
}
.btn--outline--primary {
  background: transparent;
  border: 1px solid blue;
}
.btn--outline--secondary {
  background: transparent;
  border: 1px solid black;
}

HTML 中的使用示例：

<a href="#" class="btn btn--outline--primary">...</a>

如您所见，此解决方案更易于在 HTML 中使用，但我们在每个主要和次要修饰符中复制相同的 CSS 属性（在这种情况下，我们复制背景：透明；在其他修饰符中），您可能认为它没有没关系，但在实际情况下，我们可能有很多属性在很多地方重复，所以这个解决方案肯定会在未来对该组件的开发产生重要问题

解决方案 5)

SCSS：

.btn {
    font-size: 14px;

    &--primary {
        background: blue;

        &--outline {
            background: transparent;
            border: 1px solid blue;
        }
    }
    &--secondary {
        background: black;

        &--outline {
            background: transparent;
            border: 1px solid black;
        }
    }
}

编译的 CSS：

.btn {
  font-size: 14px;
}
.btn--primary {
  background: blue;
}
.btn--primary--outline {
  background: transparent;
  border: 1px solid blue;
}
.btn--secondary {
  background: black;
}
.btn--secondary--outline {
  background: transparent;
  border: 1px solid black;
}

HTML 中的使用示例：

<a href="#" class="btn btn--primary--outline">...</a>

我们在这个解决方案中也有重复的属性（如解决方案 4）

所以它没有一个好的开发结构，它会在一个大组件中打扰程序员

我只想知道哪种解决方案是最佳选择，或者如果您对此问题有其他解决方案，请根据此按钮示例编写。

我也再次提到这一点：我以非常小的真实组件规模编写了该示例，因此在此示例中似乎不关心任何重复的属性或类名称，但在实际项目中更复杂的情况下，这将是一个严重的问题用于开发组件。

【问题讨论】：

标签： sass bem

【解决方案1】：

链接属性选择器似乎很适合您的特殊情况。假设我们的所有按钮至少包含一个.btn。这样，您既可以将每个修改案例的逻辑保留在专用的 css 规则中，也可以将重复项降至最低。

假设你有一个

<button class="btn--primary--outline"></button>

那么您可能可以将它们编写成如下 css 规则：

[class^="btn"] {
 font-size: 14px;
}

[class^="btn"][class*="--primary"] {
 background: blue;
 border-color: blue;
}

[class^="btn"][class*="--outline"] {
 border: 1px solid;
}

【讨论】：