CSS BEM 取名标准简介(强烈推荐)

日期:2021-01-20 类型:科技新闻 

关键词:在线网页制作,建网页,个人简介网页制作,简单网页,建立网页

1 甚么是 BEM 取名标准

Bem 是块(block)、元素(element)、装饰符(modifier)的简写,由 Yandex 精英团队提出的1种前端开发 CSS 取名方式论。

BEM 是1个简易又十分有效的取名承诺。让你的前端开发编码更非常容易阅读文章和了解,更非常容易合作,更非常容易操纵,更为健硕和确立,并且更为严实。

1.1 BEM 取名方式

BEM 取名承诺的方式是:

.block {}
.block__element {}
.block--modifier {}
  • block 意味着了更高級其他抽象性或组件。
  • block__element 意味着 .block 的子孙后代,用于产生1个详细的 .block 的总体。
  • block--modifier 意味着 .block 的不一样情况或不一样版本号。

应用两个连标识符和下划线而并不是1个,是以便让你自身的块能够用单独连标识符来定义。如:

.sub-block__element {}
.sub-block--modifier {}

1.2 BEM 取名法的益处

BEM的重要是,能够得到更多的叙述和更为清楚的构造,从其姓名能够了解某个标识的含意。因而,根据查询 HTML 编码中的 class 特性,就可以了解元素之间的关系。

基本的取名法示例:

<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

这类写法从 DOM 构造和类取名上能够掌握每一个元素的实际意义,但没法确立其真正的等级关联。在 css 界定时,也务必借助等级挑选器来限制管束功效域,以免跨组件的款式污染。

应用了 BEM 取名方式的示例:

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

根据 BEM 取名方法,控制模块等级关联简易清楚,并且 css 撰写上也无须作过量的等级挑选。

2 怎样应用 BEM 取名法

2.1 何时应当用 BEM 文件格式

应用 BEM 的技巧是,你要了解何时哪些物品是应当写成 BEM 文件格式的。

其实不是每一个地区都应当应用 BEM 取名方法。当必须确立关系性的控制模块关联时,理应应用 BEM 文件格式。

例如只是1条公共性的独立的款式,就沒有应用 BEM 文件格式的实际意义:

.hide {
    display: none !important;
}

2.2 在 CSS 预解决器中应用 BEM 文件格式

BEM 的1个槽点是,取名方法长而不好看,撰写不雅观。相比 BEM 文件格式带来的便捷来讲,大家应客观性看待。

并且,1般来讲会应用根据 LESS/SASS 等预解决器語言来撰写 CSS,运用其語言特点撰写起来要简易许多。

以 LESS 为例:

.article {
    max-width: 1200px;

    &__body {
        padding: 20px;
    }

    &__button {
        padding: 5px 8px;

        &--primary {background: blue;}
        &--success {background: green;}
    }
}

2.3 在时兴架构的组件中应用 BEM 文件格式

在当今时兴的 Vue.js / React / Angular 等前端开发架构中,都有 CSS 组件级功效域的编译程序完成,其基础基本原理均为运用 CSS 特性挑选器特点,为不一样的组件转化成不一样的特性挑选器。

当你挑选了这类部分功效域的写法时,在较小的组件中,BEM 文件格式将会显得没那末关键。但针对公共性的、全局性性的控制模块款式界定,還是强烈推荐应用 BEM 文件格式。

此外,针对对外公布的公共性组件来讲,1般以便设计风格的可订制性,都不容易应用这类部分功效域方法来界定组件款式。此时应用 BEM 文件格式也会大显其彩。

2.4 防止 .block__el1__el2 的文件格式

在深层次次嵌套循环的 DOM 构造下,应防止太长的款式名字界定。

3 总结

BEM 最难的一部分之1是确立功效域是从哪刚开始和到哪完毕的,和何时应用或不应用它。伴随着持续应用的工作经验累积,你渐渐地就会了解如何用,这些难题也已不是难题。技术性无优劣,适合方最好是。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。