关于BEM的反思

反思BEM

在“学习爱BEM”中，我要表明我对BEM语法的新感受。 我很高兴地报告说，经过2年以上，我仍然对我的选择感到满意。

当我们在项目中选择代码风格时，我们使用BEM和ITCSS的组合。 前几天我遇到了Spatie的指南网站。 在CSS部分，我发现了几个让我想到的部分。

怎么处理孙子元素

第一个是“孙子”的概念，它不是“标准BEM”的一部分（如果有这样的话）：

.component                      /* Component */   
.component__element             /* Child */
.component__element__element    /* Grandchild */

如果子元素在下面HTML中还有子元素怎么办？ 逻辑会说你会用这个孙子的方法。 我的经验告诉我，这导致不必要的长类名（BEM已经有错，并且没有必要尝试在CSS中反映HTML的结构。

解决这个问题花了我很长一段时间。 在CSS中反映HTML的底层结构似乎是一个干净的想法。 一旦你开始应用它，虽然你会发现这导致代码太长; 当你想改变你的HTML结构时，你需要重命名很多。

在我看来更好的是只给你的孙子元素们一个双重的下划线符号加上用不同的名字。

如果你发现你的结构太深，你可能需要定义一个新的组件。

缩短修饰符长度

在BEM中，修饰符类用两个连接符表示。 例如，我们有一个带有基类c-button的按钮。 定义一个大按钮，它是常规按钮的变体，使用c-button--large修饰。在html中，它可能是这样的<button class="c-button c-button--large">My button text</button>

在Spatie的指南中，有一个关于修饰符的部分。 基本思想是你用“ - ”编写修饰符，并且他们有一个责任，即他们应该只修改一件事情。

使用这种做法可以缩短HTML，但我认为这是有问题的。

BEM是如此强大之处在于重构。 当您重构项目时，您通常会在代码库的大部分内进行搜索，还有很多是跨越多文件进行搜索。

举个例子：如果你的类命名为c-button--large，如果你想去除它，你可以在项目中包括javascript,html, css中搜索使用到这个字符串的地方。

使用这种方法，你能寻找到什么？ 一个large字符串？ 这很有可能在代码的其他实例中使用，例如图像引用或不相关的javascript。

如果你写这样的代码，你就是在为自己创造了一个难以在将来重构的代码。 当然，现在可能会更容易输入。但是最终你会发现自己的麻烦会更大。

为什么BEM是如此的伟大？，就在于它提供了一个清晰的命名空间来说明自身的作用。无论是手动还是编程（即通过linters）。

结论

我认为：我们不需要用很多不必要的条件来是使BEM变的更复杂，这样会使情况变得更糟糕

每个人都有自己的编码风格，这根据你的工作不同而变化，很多BEM / ITCSS规范没有意义。 对于很多营销网站来说，甚至是完全多余的。

我赞扬Spatie对外公开它们的内部规范。 更多的公司应该这样做，包括我们！

我希望这篇文章不被视为直接批评他们的CSS指南，而是作为对我们所做选择的讨论的一种方式。

翻译自Overthinking BEM

关注我的公众号，更多优质文章定时推送