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

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

不看布局就很难猜出正确的方法。 但是我会尽力的。

1. 尽量避免使用诸如包装器之类的实体（请参阅https://en.bem.info/methodology/css/#how-do-i-make-an-html-wrapper ）。
2. 请尝试混合（ https://en.bem.info/methodology/css/#mixes ）
3. 不要害怕拥有长的类名，实际上它比诸如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内混合块与元素form的campaign-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并且特定于form__submit campaign-form所有内容都保留在其自己的元素中。 因此，您可以随时随地轻松地重用基本的表单样式。