javascript - 如何让 BEM 不那么晦涩

Question

我已经开始在一些项目中使用 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 属性的事情？

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

Answer 1

我在使用 BEM 时遇到了完全相同的问题。我的解决方案是使我的代码成为 BEM 的一种形式，但不是 100% 符合 BEM 指南。

我做的是这样的:

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

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

对于实际的介绍 block ，这是我的 sass 的样子:

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

Helpers.scss
.red {
    color: red;
}

如您所见，您可以根据需要深入嵌套 Sass，我保留最多 3 层深度的规则。

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

希望对你有帮助。

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