如何避免 BEM 中相同 class 名称的冲突？

Question

我正在使用 BEM 方法维护我的 CSS 代码的网站。这是一些 HTML 代码：

<div>
    <form class="sc-campaign-form__test-wrapper" id="test-wrapper-1">
        <input type="text" class="sc-campaign-form__test-input" />
        <input type="submit" class="sc-campaign-form__test-submit" />
    </form>
    <form class="sc-campaign-form__test-wrapper" id="test-wrapper-2">
        <input type="text" class="test-wrapper__test-input" />
        <input type="submit" class="test-wrapper__test-submit" />
    </form>
</div>

我认为从 BEM 的角度来看 test-wrapper-2 更正确，但是如果我将所有内容都捆绑到一个大的 CSS 文件中，我担心会产生冲突，因为 test-wrapper__test-input 看起来很常见。虽然我想为不同的测试包装器设置不同的样式。哪种方式会更合适？

Answer 1

不看布局很难猜对。不过我会努力的。

尽量避免包装器等实体（参见 https://en.bem.info/methodology/css/#how-do-i-make-an-html-wrapper）。
请尝试混合(https://en.bem.info/methodology/css/#mixes)
不要害怕有长类名，实际上它比 sc 这样的缩写更好。更难记住它的意思。

所以我建议这样的结果：

<div class="campaign-form">
    <form class="form campaign-form__form">
        <input type="text" class="form__input" />
        <input type="submit" class="form__submit" />
    </form>
</div>

所以在这里你有 campaign-form 块，里面有抽象通用 form 块与 campaign-form 的元素 form 混合（这是你用来提供的选择器特定于 campaign-form 样式）。

如果您还需要调整表单元素的样式，您也可以向元素添加混合：

<div class="campaign-form">
    <form class="form campaign-form__form">
        <input type="text" class="form__input campaign-form__input" />
        <input type="submit" class="form__submit campaign-form__submit" />
    </form>
</div>

因此，所有通用样式都将保留在可重复使用的 form + form__input + form__submit 中，所有特定于 campaign-form 的元素都将保留在它自己的元素中。因此，您可以随时随地轻松地重复使用基本的表单样式。

如何避免 BEM 中相同 class 名称的冲突？

How to avoid conflict of same class names in BEM?

css

bem