css - BEM 重用通用样式

Question

我试图用 CSS 围绕 BEM 进行思考，但遇到了困难。

我有一个包含 <ul> 元素的 block 这基本上是标签。我系统周围的所有选项卡看起来都一样 - 我可以同时拥有 .tabs 吗？我的课 <ul>以及 block__element (如 card__tabs )？

或者我是否必须为所有具有标签的 block /元素创建相同的 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>

问题来自于使用诸如 Materialize CSS 库之类的东西。或者我应该改用 mixin？

Answer 1

要么使用 mixin，要么像这样设计你的 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>

不要害怕使用一些额外的标记。没有人会因为剃掉几个标签而给你一枚奖章。