BEM命名规则

BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。

重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改过的。这篇文章中介绍的这种命名技术并不是原始的BEM,但却是一个我更喜欢的改进版。无论实际使用了什么样的符号,它们其实都是基于同样的BEM原则。

命名约定的模式如下:

.block{}

.block__element{}

.block--modifier{}

  • .block 代表了更高级别的抽象或组件。
  • .block__element 代表.block的后代,用于形成一个完整的.block的整体。
  • .block--modifier代表.block的不同状态或不同版本。

之所以使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定,如:

.site-search{} /* 块 */

.site-search__field{} /* 元素 */

.site-search--full{} /* 修饰符 */

BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。我们用一个类比/模型来思考一下下面的这些元素是怎么关联的:

.person{}

.person__hand{}

.person--female{}

.person--female__hand{}

.person__hand--left{}

顶级块是‘person’,它拥有一些元素,如‘hand’。一个人也会有其他形态,比如女性,这种形态进而也会拥有它自己的元素。下面我们把他们写成‘常规’CSS:

.person{}

.hand{}

.female{}

.female-hand{}

.left-hand{}

这些‘常规’CSS都是有意义的,但是它们之间却有些脱节。就拿.female来说,是指女性人类还是某种雌性的动物?还有.hand,是在说一只钟表的指针(译注:英文中hand有指针的意思)?还是一只正在玩纸牌的手?使用BEM我们可以获得更多的描述和更加清晰的结构,单单通过我们代码中的命名就能知道元素之间的关联。BEM真是强大。

再来看一个之前用‘常规’方式命名的.site-search的例子:

<form class="site-search full">

<input type="text" class="field">

<input type="Submit" value ="Search" class="button">

</form>

这些CSS类名真是太不精确了,并不能告诉我们足够的信息。尽管我们可以用它们来完成工作,但它们确实非常含糊不清。用BEM记号法就会是下面这个样子:

<form class="site-search site-search--full">

<input type="text" class="site-search__field">

<input type="Submit" value ="Search" class="site-search__button">

</form>

我们能清晰地看到有个叫.site-search的块,他内部是一个叫.site-search__field的元素。并且.site-search还有另外一种形态叫.site-search--full。

<div class="media">

<img src="logo.png" alt="Foo Corp logo" class="media__img--rev">

<div class="media__body">

<h3 class="alpha">Welcome to Foo Corp</h3>

<p class="lede">Foo Corp is the best, seriously!</p>

</div>

</div>

我们立马就能明白.media是一个块,.media__img--rev是一个加了修饰符的.media__img的变体,它是属于.media的元素。而.media__body是一个尚未被改变过的也是属于.media的元素。所有以上这些信息都通过它们的class名称就能明白,由此看来BEM确实非常实用。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
BEM命名法是一种用于HTML和CSS的命名约定,它的名称来自其三个部分:块(Block)、元素(Element)和修饰符(Modifier)。BEM的目标是创建具有高可重用性、易于理解和维护的代码。 下面是一个具体的例子,我们想要创建一个带有标题、列表和按钮的简单组件: ```html <div class="component"> <h2 class="component__title">Component Title</h2> <ul class="component__list"> <li class="component__list-item">Item 1</li> <li class="component__list-item">Item 2</li> <li class="component__list-item">Item 3</li> </ul> <button class="component__button component__button--disabled">Disabled Button</button> </div> ``` 在这个例子中,我们使用BEM命名法来命名我们的组件和组件内的元素和修饰符。以下是每个部分的解释: - 块(Block):`component`是我们的块。它表示整个组件。 - 元素(Element):`title`、`list`和`list-item`是我们的元素。它们是组件内部的子元素,与块相关联。 - 修饰符(Modifier):`button--disabled`是我们的修饰符。它表示一个特定的状态或变化,例如按钮的禁用状态。 使用BEM命名法的好处是,它可以帮助我们更清晰地组织和描述我们的代码。通过明确地命名块、元素和修饰符,我们可以更容易地理解代码的结构和意图。此外,由于BEM具有一致的命名规则,它也可以帮助团队协作开发,并提高代码的可重用性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值