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块，里面混有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中，并且campaign-form专有的所有内容都将保留在其自己的元素中。因此，您可以随时随地轻松地重用基本的表单样式。

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

1 个答案: