How to style buttons using BEM?

Question

我是 html/css 的新手，我正在学习 BEM css 方法，但我很早就陷入困境。

我想做的事：

• 有一个按钮块
• 有一个颜色修饰符（默认/原色）
• 具有不同的按钮样式（默认/轮廓）

根据我对 BEM 的理解，我应该定义这些类：

.button {
    border: unset;
    padding: 4px 10px 4px 10px;
}

.button--primary {
    background-color: blue;
    color: white;
}

.button--outline {
    background-color: transparent;
    border: 1px solid black;
}

当我只使用其中一个修饰符时，一切正常。但是当我同时拥有而不是蓝色边框 + 蓝色文本颜色时，我得到黑色边框 + 白色文本颜色。

我当然可以这样写：

.primary {
    background-color: blue;
    border-color: blue;
    color: white;
}

.outline {
    background-color: transparent;
    border: 1px solid black;
}

.primary.outline {
    border-color: blue;
    color: blue;
}

但是根据 BEM，我应该避免使用这些选择器。

我该如何解决这个问题？我所能想到的就是使用本地 css 变量，但在更复杂的情况下，这意味着我必须为我使用的几乎每个属性使用一个变量，这感觉不对。

HTML

<h1>using BEM</h1>
<button class="button">default</button>
<button class="button button--primary">primary</button>
<button class="button button--outline">outline</button>
<button class="button button--primary button--outline">primary outline</button>

<h1>not using BEM</h1>
<button class="button">default</button>
<button class="button primary">primary</button>
<button class="button outline">outline</button>
<button class="button primary outline">primary outline</button>

Answer 1

在块级别定义三个自定义属性：

• --bg-color

  ,

• --text-color

  ,

• --border-color

这样，修改器可以调整自定义属性（背景颜色、文本颜色和边框属性），块样式将反映这些更改。

.button {
    border: unset;
    padding: 4px 10px 4px 10px;

    --bg-color: transparent;
    --text-color: black;
    --border-color: black;
}


.button--primary {
    --bg-color: blue;
    --text-color: white;
}


.button--outline {
    --border-color: var(--text-color);
}


.button--primary.button--outline {
    --bg-color: var(--bg-color);
    --border-color: blue;
    --text-color: blue;
}


.button {
    background-color: var(--bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.primary {
    background-color: blue;
    border-color: blue;
    color: white;
}

.outline {
    background-color: transparent;
    border: 1px solid black;
}

.primary.outline {
    border-color: blue;
    color: blue;
}

<h1>using BEM</h1>
<button class="button">default</button>
<button class="button button--primary">primary</button>
<button class="button button--outline">outline</button>
<button class="button button--primary button--outline">primary outline</button>

<h1>not using BEM</h1>
<button class="button">default</button>
<button class="button primary">primary</button>
<button class="button outline">outline</button>
<button class="button primary outline">primary outline</button>