BEM 重用通用样式

Question

我正试图用 CSS 围绕 BEM 思考，但卡住了。

我有一个包含元素的块，其中包含 <ul>，这些元素基本上是制表符。我系统周围的所有选项卡看起来都一样 - 我可以在我的 <ul> 上同时使用 .tabs class 和 block__element （例如 card__tabs ）？

或者我是否必须为所有 block/elements 具有标签的所有 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 库之类的东西。或者我应该改用 mixins？

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>

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

BEM 重用通用样式

BEM re-using common styles

css

bem