Explication détaillée de la syntaxe BEM

Cette fois, je vous apporte une explication détaillée de la syntaxe BEM. Quelles sont les précautions lors de l'utilisation de la syntaxe BEM. Voici des cas pratiques, jetons un coup d'œil.

BEM signifie bloc, élément et modificateur. Il s'agit d'une méthodologie de dénomination frontale proposée par l'équipe Yandex. Cette méthode de dénomination intelligente rend vos classes CSS plus transparentes et plus significatives pour les autres développeurs. Les conventions de dénomination BEM sont plus strictes et contiennent plus d’informations, et elles sont utilisées par une équipe pour développer un projet volumineux et fastidieux.

Il est important de noter que le schéma de dénomination basé sur BEM que j'ai utilisé a été modifié par Nicolas Gallagher. La technique de dénomination décrite dans cet article n'est pas le BEM original, mais c'est une version améliorée que je préfère. Quelle que soit la notation utilisée, elles sont toutes basées sur les mêmes principes BEM. Le modèle de convention de dénomination

est le suivant :

.block{}.blockelement{}.block--modifier{}

• .block représente une abstraction ou un composant de niveau supérieur.

• .blockelement représente les descendants de .block et est utilisé pour former un .block complet dans son ensemble.

• .block--modifier représente différents états ou différentes versions de .block.

La raison pour laquelle vous utilisez deux traits d'union et un trait de soulignement au lieu d'un seul est pour que vos propres blocs puissent être délimités par un seul trait d'union, comme ceci :

.site-search{} /* 块 */.site-searchfield{} /* 元素 */.site-search--full{} /* 修饰符 */

La clé de BEM est que vous pouvez indiquer aux autres développeurs à quoi sert une certaine balise simplement par son nom. En parcourant l'attribut de classe dans le code HTML, vous pouvez comprendre comment les modules sont liés : certains ne sont que des composants, certains sont des descendants ou des éléments de ces composants, et certains sont d'autres formes ou modifications du symbole des composants. Utilisons une analogie/un modèle pour réfléchir à la façon dont les éléments suivants sont liés :

.person{}.personhand{}.person--female{}.person--femalehand{}.personhand--left{}

Le bloc de niveau supérieur est « personne », qui contient des éléments tels que « main ». Une personne aura également d’autres formes, comme une forme féminine, qui à son tour aura ses propres éléments. Ci-dessous, nous les écrivons en tant que CSS « normaux » :

.person{}.hand{}.female{}.female-hand{}.left-hand{}

Ces CSS « normaux » ont tous du sens, mais il y a un léger décalage entre eux. Prenons l'exemple de .female. Cela fait-il référence à un être humain femelle ou à une sorte d'animal femelle ? Et .hand, est-ce qu'il parle des aiguilles d'une horloge (Annotation : hand signifie mains en anglais) ? Ou une main jouant aux cartes ? En utilisant BEM, nous pouvons obtenir plus de descriptions et une structure plus claire, et nous pouvons connaître la relation entre les éléments simplement grâce à la dénomination dans notre code. BEM est vraiment puissant.

Regardez un autre exemple de .site-search nommé de manière « conventionnelle » :

<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

Ces noms de classes CSS sont vraiment imprécis et ne nous donnent pas suffisamment d'informations. Même si nous pouvons faire le travail avec eux, ils sont vraiment vagues. En utilisant la notation BEM, cela ressemblera à ceci :

<form class="site-search  site-search--full">
  <input type="text" class="site-searchfield">
  <input type="Submit" value ="Search" class="site-searchbutton">
</form>

Nous pouvons clairement voir qu'il y a un bloc appelé .site-search, et à l'intérieur se trouve un élément appelé .site-searchfield. Et .site-search a une autre forme appelée .site-search--full.

Donnons un autre exemple...

Si vous êtes familier avec OOCSS (Orienté objetCSS), alors vous devez être familier avec les objets multimédias. En utilisant BEM, l'objet média ressemblera à ceci :

.media{}.mediaimg{}.mediaimg--rev{}.mediabody{}

D'après cette méthode d'écriture CSS, nous savons déjà que .mediaimg et .mediabody doivent être situés à l'intérieur de .media. une autre forme de .mediaimg--rev. Nous pouvons obtenir toutes les informations ci-dessus simplement grâce au nom du .mediaimgSélecteur CSS.

Un autre avantage de BEM concerne la situation suivante :

<p class="media">
  <img src="logo.png" alt="Foo Corp logo" class="img-rev">
  <p class="body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </p>
</p>

À partir du code ci-dessus, nous ne comprenons pas du tout la relation entre les deux classes .media et .alpha. Comment sont-ils liés les uns aux autres ? De même, nous n'avons aucun moyen de savoir quelle est la relation entre .body et .lede, ou entre .img-rev

et .media ? À partir de ce HTML (à moins que vous ne connaissiez très bien l'objet média), nous ne savons pas de quoi est composé ce composant ni quelles autres formes il a. Si on réécrit ce code façon BEM :

<p class="media">
  <img src="logo.png" alt="Foo Corp logo" class="mediaimg--rev">
  <p class="mediabody">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </p>
</p>

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

丑极了！

通常人们会认为BEM这种写法难看。我敢说，如果你仅仅是因为这种代码看上去不怎么好看而羞于使用它，那么你将错失最重要的东西。除非使用BEM让代码增加了不必要的维护困难，或者这么做确实让代码更难读了，那么你在使用它之前就要三思而行了。但是，如果只是“看起来有点怪”而事实上是一种有效的手段，那么我们在开发之前当然应该充分考虑它。

是，BEM看上去确实怪怪的，但是它的好处远远超过它外观上的那点瑕疵。

BEM可能看上去有点滑稽，而且有可能导致我们输入更长的文本（大部分编辑器都有自动补全功能，而且gzip压缩将会让我们消除对文件体积的担忧），但是它依旧强大。

用还是不用BEM?

我在我的所有项目中都使用了BEM记号法，因为它的有效性已经被它自己一次又一次地证明。我也极力地建议别人使用BEM，因为它让所有东西之间的联系变得更加紧密，让团队甚至是你个人都能够更加容易地维护代码。

然而，当你真正使用BEM的时候，重要的是，请记住你没必要真的在每个地方都用上它。比如：

.caps{ text-transform:uppercase; }

这条CSS不属于任何一个BEM范畴，它仅仅只是一条单独的样式。

另一个没有使用BEM的例子是：

.site-logo{}

这是一个logo，我们可以把它写成BEM格式，像下面这样：

.header{}.headerlogo{}

但我们没必要这么做。使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。这个例子中，网站logo完全是恰巧在.header的内部，它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文，因此你要确定只在你需要用到BEM的地方你才使用它。再看一个例子：

<p class="content">
  <h1 class="contentheadline">Lorem ipsum dolor...</h1>
</p>

在这个例子里，我们也许仅仅只需要另一个class，可以叫它.headline；它的样式取决于它是如何被层叠的，因为它在.content的内部；或者它只是恰巧在.content的内部。如果它是后者（即恰巧在.content的内部，而不总是在）我们就不需要使用BEM。

然而，一切都有可能潜在地用到BEM。我们再来看一下.site-logo的例子，想象一下我们想要给网站增加一点圣诞节的气氛，所以我们想有一个圣诞版的logo。于是我们有了下面的代码：

.site-logo{}.site-logo--xmas{}

我们可以通过使用--修饰符来快速地为我们的代码构建另一个版本。

BEM最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它。随着接触的多了，有了经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

在表单中button与input的区别

详谈css样式初始化 

js的自定义trim函数使用方法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!