BEM 简介

BEM 是一种前端项目开发的方法学,由 Yandex 公司提出。BEM 的名称来源于该方法学的三个组成部分的英文首字母,分别是块(Block)、元素(Element)和修饰符(Modifier)。这三个不同的组成部分称为 BEM 实体。

解决的问题

当一个项目比较大的时候,容易产出样式冲突的问题。BEM 主要解决样式的冲突的问题,以此帮助你在前端开发中实现可复用的组件和代码共享。

感兴趣的可以其他解决代码样式冲突的方案:【译】CSS 模块

基本概念

块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。块中封装了组件相关的 JavaScript、CSS 代码和 HTML 模板。由于块是独立的,可以在应用开发中进行复用,从而降低代码重复并提高开发效率。块可以放置在页面上的任何位置,也可以互相嵌套。同一个块可以在页面上存在多个实例。块的不同实例具有相似的结构。一个典型的块的示例是菜单。一个项目中可以有多个不同的菜单,具体相似的结构和样式。

块的名称应该是全局唯一的。一个页面可以

元素

元素是块中的组成部分。元素不能离开块来使用。在菜单块中,每个菜单项是块中的元素。

修饰符

修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后,会有不同的外观。当菜单块出现在页面上的不同位置时,可以有不同的样式。菜单块中的菜单项可以有选中或非选中的状态。

例子

HTML

<ul class="menu">
  <li class="menu__item menu__item--selected">Menu Item 1</li>
  <li class="menu__item">Menu Item 2</li>
  <li class="menu__item">Menu Item 3</li>
</ul>

CSS

.menu {
 list-style: none;
}
.menu__item {
 font-weight: bold;
}
.menu__item--selected {
 color: red;
}

BEM 常见问题

避免 .block__el1__el2

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem1__elem2'>
            <div class='block__elem1__elem2__elem3'></div>
        </div>
    </div>
</div>

优化为

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'>
            <div class='block__elem3'></div>
        </div>
    </div>
</div>

modify 影响元素的写法

避免用 block-name–-modifier-name__element-name 的写法

// bad
<div class="block block--xmas">
  <button class="block__btn block--xmas__btn"></button>
</div>

// good

<div class="block block--xmas">
  <button class="block__btn"></button>
</div>
<style>
.block--xmas .block__button {
    /* Jingle bells, jingle bells, jingle all the way.*/
}
</style>

组件下的组件

避免用 block-name__block2-name 的写法

// bad
<div class='block'>
    <div class='block__block2'>
        <div class='block__block2__elem'>
        </div>
    </div>
</div>

// good
<div class='block'>
    <div class='block2 block2--modifier'>
        <div class='block2__elem'>
        </div>
    </div>
</div>

响应式组件的处理

用 @ 。如

<div class="block block2@sm"></div>
<style>
@media (min-width: 15em) {
  .block2\@sm {}
}
</style>

拓展阅读


本文遵守创作共享CC BY-NC-SA 4.0协议 网络平台如需转载必须与本人联系确认。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java后端技术

jquery中dom元素的attr和prop方法的理解

  在编写使用高版本[ jQuery 1.6 开始新增了一个方法 prop()]的jquery插件进行编写js代码的时候,经常不知道dom元素的attr和pro...

10820
来自专栏程序猿

用 Python 向你比个心

之前写了一篇用 Python 画一个小猪佩奇和哆啦 A 梦,然后最近看到有人用 turtle 画了一个心,觉得挺有意思的,于是把代码复制到本地,再加了个播放音乐...

42250
来自专栏MelonTeam专栏

Android ScrollView设置初始position的方法

最近接了产品的一个需求,需要在一个拥有标题栏,内容区,图片区的滚动视图中,默认隐藏标题栏,而且支持用户手动下拉出现标题。 刚听到这个需求的时候,觉得这个很简单,...

66470
来自专栏数据小魔方

符号的艺术

今天跟大家聊聊ppt中的符号艺术——项目符号! ▼▼▼ 大家在word排版过程中,如果内容很长并且逻辑性很强的话,都会下意识的使用项目符号,使得文章结构分明,逻...

40050
来自专栏前端知识分享

第86天:HTML5应用程序标签和智能表单

-webkit-appearance: none;   /*如果要改默认样式 要先取消默认样式 */

11620
来自专栏小李刀刀的专栏

容易被误解的overflow:hidden

为了页面的健壮性,我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上...

439110
来自专栏练小习的专栏

(X)HTML Strict 下的嵌套规则

下面是一份在 HTML 4 Strict 和 XHTML 1.0 Strict 下必须遵守的标签嵌套规则,比如你不能在 <a> 里面再嵌入一个 <a> 这样的约...

23490
来自专栏守候书阁

[边学边练]用简单实例学习React

学习之路不可停止,最近在玩 React。也动手尝试写了一个实例。借此整理总结下初步学习 React 的一些基础知识。因为这几天比较忙,没那么多时间,所以实例和文...

16460
来自专栏较真的前端

关于事件的前端面试题总结

34850
来自专栏数据小魔方

数据地图系列9|excel(VBA)数据地图!

今天要跟大家分享的是数据地图系列的第九篇——excel(VBA)数据地图! 关于VBA在excel中的应用非常广泛,本篇仅仅是给出示例代码,不会对基础操作做太过...

62460

扫码关注云+社区

领取腾讯云代金券