javascript - React CSS 模块中 BEM 中的 "M"问题

Question

我正在尝试将 BEM 合并到我的项目中。元素部分(block__element)很好，但是当我尝试命名修饰符(block__element--modifier)时，我不断收到错误。下面是我的代码，包括错误、我为 BEM 编写的 mixin、SCSS 片段以及 IDE (webstorm) 中的设置。我尝试了所有不同的方法(不使用 mixin 等)，但似乎没有任何效果。请帮忙!

Answer 1

您使用修饰符的方式根本不正确。

修饰符不是子元素，它们是 block 和元素的修饰符，没有母实体就不能使用。

正确:

• <div class="b">
• <div class="b__e">
• <div class="b b--m1 b--m2">
• <div class="b__e b__e--m b__e--m2">

错误:

• <div class="b--m1">
• <div class="b__e--m">

它之所以这样工作的原因是修饰符的本质 - 它们非常接近接口(interface)或混合，它们不能在没有 block 的情况下使用，就像接口(interface)不能在没有类的情况下使用一样。

在此处了解有关修饰符的更多信息:https://en.bem.info/methodology/key-concepts/#modifier

另一件事是你不应该在 HTML 结构中重复 BEM 结构。

所以这是不正确的:

<div className={styles.card__content}>
    <div className={styles['card__content--icn']}>Icon</div>
    <div className={styles['card__content--sub']}>Test</div>
</div>

这是正确的:

<div className={styles.card__content}>
    <div className={styles.card__icon}>Icon</div>
    <div className={styles.card__sub}>Test</div>
</div>

参见https://en.bem.info/methodology/faq/#can-i-create-elements-of-elements-block__elem1__elem2

<小时/>

如果您对将 BEM 与 React 结合使用感兴趣，您应该看看 bem-react-core — 一个可以帮助您生成 BEM 类、提供运行时等的小型库:

• https://github.com/bem/bem-react-core/