如何让 BEM 变得不那么晦涩答案

【问题标题】：How to make BEM less obsuse如何让 BEM 变得不那么晦涩
【发布时间】：2018-08-10 05:03:20
【问题描述】：

我已经开始在一些项目中使用 BEM，发现在我的 HTML 中编写有点笨拙。我试图让它变得简单，所以当我为每个元素编写类时，我必须少重复自己，并使用 JS 应用一些结构，这会迫使我正确地做到这一点。输出将类似于：

<div class="intro intro--red">
   <h1 class="intro__title">Title</h1>
   <p class="intro__p">Text</p>
   <p class="intro__p intro__p--red">Text</p>
   <a href="#" class="btn btn--red">Link</a>
</div>

但写得更短更简单，例如：

<div b="intro" m="red">
   <h1 e="title">Title</h1>
   <p>Text</p>
   <p m="red">Text</p>
   <a href="#" b="btn" m="red">Link</a>
</div>

这样我可以命名元素，或者如果没有设置，它可以给我基于 html 元素的类。希望这将有助于保持我的 sass 干净整洁，并且打字速度非常快。我尝试了basic implementation，但我认为可能有更好的方法来做到这一点，或者我可能正在做一些我不应该使用这样的 html 属性的事情？

任何智慧或指点将不胜感激？

【问题讨论】：

标签： javascript sass workflow bem

【解决方案1】：

我在使用 BEM 时遇到了同样的问题。我的解决方案是让我的代码成为一种 BEM 形式，但不是 100% 符合 BEM 准则。

我所做的是这样的：

<div class="intro">
    <div class="intro-title">
        <p class="red">Some Text</p>
    </div>
</div>

所以颜色之类的东西会得到全局助手，然后是一堆用于简单样式的助手，比如字体大小或间距等。

对于实际的介绍块，这就是我的 sass 的样子：

Intro.scss
.intro {
    &-title {
        float: left;
    }
}

Helpers.scss
.red {
    color: red;
}

如您所见，您可以随心所欲地嵌套 sass，我保持最大 3 层深度的规则。

这不是 100% BEM 方法，但它是一种形式:)

希望对你有所帮助。

我也会避免将这些自定义属性放在 html 上并使用 JS 解析东西，当涉及到这些东西时，我个人是一个纯粹主义者，而 HTML 不是为此而设计的，所以我不会使用它。加上通过 JS 加载 css 并牢记性能时潜在的内容闪烁。但这完全是你自己的喜好，只是给你一个关于我如何解决这个对我有用的问题的指针。

【讨论】：