使用 BEM 编写 CSS 时常见的错误

软件开发是一项团队合作

在进行软件开发时，就指导方针、技术和方法达成一致至关重要。这些共识应该基于讨论、概念验证、知识积累，有时还需要投票。应该邀请整个团队参与，因为软件开发是一项团队工作，每个人都喜欢团队成员的参与。

在 visuellverstehen，我们分为多个团队。一些团队同意使用Block-Element-Modifier (BEM)，而其他团队则同意使用Tailwind CSS。我认为就其中一种方式达成一致至关重要，但为了确保客户项目的成功，两种方式都完全可以接受。

有一件事是肯定的。如果你不同意，事情就会变得一团糟。我经历过这种情况。

学习正确的 BEM

我们的团队时不时会有新同事加入。有些人之前从未听说过 BEM。所以他们必须学习它，自然会犯一些错误。错误根本不是问题，这是学习过程的一部分。

四个最常见的错误

为了帮助您学习正确的 BEM，我写下了我在日常工作中看到的一些最常见的错误。

1. 错误嵌套的块和元素

不允许嵌套块。如果开始一个新块，则不允许继续使用另一个块中的元素。

❌ 错误

<article class="card">
    <header class="header">
        <h2 class="card__headline"></h2>
    </header>
</article>

✅正确

<article class="card">
    <header class="card__header">
        <h2 class="card__headline"></h2>
    </header>
</article>

2. 曾孙

BEM 中没有孙子或曾孙。相反，可以使用块的“正常”元素。

❌ 错误

<article class="card">
    <header class="card__header">
        <h2 class="card__header__headline"></h2>
    </header>
</article>

✅正确

<article class="card">
    <header class="card__header">
        <h2 class="card__headline"></h2>
    </header>
</article>

3. 没有基类的修饰符

如果没有基本块或元素，修饰符就不能存在。

❌ 错误

<article class="card--highlight">
    <header class="card__header"></header>
</article>

✅正确

<article class="card card--highlight">
    <header class="card__header"></header>
</article>

❌ 错误

<article class="card">
    <header class="card__header--important"></header>
</article>

✅正确

<article class="card">
    <header class="card__header card__header--important"></header>
</article>

4. 区块太大

创建非常大的块并不是一个好主意。BEM 的理念是创建模块化且可重用的块。

❌ 错误

<body class="body">
    <header class="body__header"></header>
    <main class="body__main"></main>
    <footer class="body__footer"></footer>
</body>

✅正确

<body class="body">
    <header class="header"></header>
    <main class="main"></main>
    <footer class="footer"></footer>
</body>

自动化

有时候手动查找错误很困难。昨天我了解到有个BEM linter工具。我会研究一下。

文章来源：https://dev.to/visuellverstehen/common-mistakes-when-writing-css-with-bem-4921