BEM重复使用常见样式

Question

我正试图用CSS包围BEM并陷入困境。

我有一个包含<ul>元素的块，它们基本上是制表符。我的系统周围的选项卡看起来都是一样的 - 我可以在.tabs上同时拥有<ul>类，还有block__元素（如card__tabs）？

或者我是否必须为所有带标签的块/元素创建相同的CSS样式集？

<div class="card">
    <ul class="card__tabs tabs">
        <li>Tab 1</li>
        <li>Tab 2</li>
    </ul>

    <p class="card__description"> Some lovely flavour text</p>
</div>

问题源于使用Materialise CSS库之类的东西。或者我应该使用mixins代替？

Answer 1

使用mixins或像这样设计你的HTML：

<div class="card">
    <div class="card__tabs">
        <ul class="tabs">
            <li>Tab 1</li>
            <li>Tab 2</li>
        </ul>
    </div>

    <p class="card__description"> Some lovely flavour text</p>
</div>

不要害怕使用一点额外的标记。没有人会给你一枚奖章来削减一些标签。