如何使BEM减少麻烦

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何使BEM减少麻烦相关的知识,希望对你有一定的参考价值。

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

以上是关于如何使BEM减少麻烦的主要内容,如果未能解决你的问题,请参考以下文章

如何使列表视图出现在片段中?

如何减少两行浏览片段之间的距离

如何在 SASS 中使用嵌套元素构造 BEM 修改器

如何使用 BEM 正确设置元素的范围?

SMACSS 和 BEM:如何在模块中定位模块?

如何减少页面之间跳转的延迟(片段/活动)