如何使BEM减少麻烦

Posted 2021-05-04

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

任何智慧或指针都会受到赞赏吗？

答案

我使用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并同时考虑性能时，潜在的内容会闪烁。但这完全是你自己的偏好，只是给你一个指针，我如何解决这个问题对我有用。