使用 React CSS 模块的 BEM 中的 "M" 问题

Question

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

Answer 1

您可以使用另一种对象形式的记录。尝试这样的事情：className={styles['card_content--icn']}

Answer 2

你使用修饰符的方式完全不正确。

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

正确：

<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">

之所以这样工作，是因为修饰符的性质——它们是非常接近接口或混入的东西，它们不能在没有块的情况下使用，就像接口不能在没有类.

在此处阅读有关修饰符的更多信息：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/

使用 React CSS 模块的 BEM 中的 "M" 问题

Issue with "M" in BEM with React CSS Module

javascript

sass

classname

bem

reactjs