Detaillierte Erläuterung der BEM-Syntax

Dieses Mal erkläre ich Ihnen ausführlich, welche Vorsichtsmaßnahmen bei der Verwendung der BEM-Syntax zu beachten sind.

BEM bedeutet Block, Element und Modifikator. Es handelt sich um eine vom Yandex-Team vorgeschlagene Front-End-Benennungsmethode. Diese clevere Benennungsmethode macht Ihre CSS-Klassen für andere Entwickler transparenter und aussagekräftiger. BEM-Namenskonventionen sind strenger und enthalten mehr Informationen und werden von einem Team zur Entwicklung eines großen und zeitaufwändigen Projekts verwendet.

Es ist wichtig zu beachten, dass das von mir verwendete BEM-basierte Benennungsschema von Nicolas Gallagher geändert wurde. Die in diesem Artikel beschriebene Benennungstechnik ist nicht das ursprüngliche BEM, sondern eine verbesserte Version, die ich bevorzuge. Unabhängig von der tatsächlich verwendeten Notation basieren sie alle auf denselben BEM-Prinzipien. Das

-Namenskonventionsmuster lautet wie folgt:

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

• .block stellt eine Abstraktion oder Komponente einer höheren Ebene dar.

• .blockelement stellt die Nachkommen von .block dar und wird verwendet, um einen vollständigen .block als Ganzes zu bilden.

• .block--modifier repräsentiert verschiedene Zustände oder verschiedene Versionen von .block.

Der Grund, warum Sie zwei Bindestriche und einen Unterstrich anstelle von einem verwenden, besteht darin, dass Ihre eigenen Blöcke mit einem einzigen Bindestrich abgegrenzt werden können, wie folgt:

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

Der Schlüssel zu BEM besteht darin, dass Sie anderen Entwicklern allein anhand des Namens mitteilen können, wofür ein bestimmtes Tag verwendet wird. Durch Durchsuchen der Klassenattribute im HTML-Code können Sie verstehen, wie Module miteinander verbunden sind: Einige sind nur Komponenten, andere sind Nachkommen oder Elemente dieser Komponenten und einige sind andere Formen oder Modifikationen von Komponentensymbolen. Lassen Sie uns anhand einer Analogie/eines Modells darüber nachdenken, wie die folgenden Elemente zusammenhängen:

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

Der oberste Block ist „Person“, der Elemente wie „Hand“ enthält. Eine Person wird auch andere Formen haben, beispielsweise eine weibliche Form, die wiederum ihre eigenen Elemente haben wird. Nachfolgend schreiben wir sie als „normales“ CSS:

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

Diese „normalen“ CSS machen alle Sinn, aber es gibt eine gewisse Diskrepanz zwischen ihnen. Nehmen wir als Beispiel .female. Bezieht es sich auf einen weiblichen Menschen oder eine Art weibliches Tier? Und handelt es sich bei .hand um die Zeiger einer Uhr (Anmerkung: hand bedeutet auf Englisch Zeiger)? Oder eine Hand beim Kartenspielen? Mithilfe von BEM können wir mehr Beschreibungen und eine klarere Struktur erhalten und die Beziehung zwischen Elementen allein durch die Benennung in unserem Code erkennen. BEM ist wirklich mächtig.

Sehen Sie sich ein weiteres Beispiel für eine „konventionelle“ Benennung von .site-search an:

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

Diese CSS-Klassennamen sind wirklich ungenau und sagen uns nicht genügend Informationen. Obwohl wir mit ihnen unsere Arbeit erledigen können, sind sie doch sehr vage. Mit der BEM-Notation sieht es so aus:

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

Wir können deutlich sehen, dass es einen Block namens .site-search gibt und darin ein Element namens .site-searchfield. Und .site-search hat eine andere Form namens .site-search--full.

Lassen Sie uns ein weiteres Beispiel geben...

Wenn Sie mit OOCSS (ObjektorientiertCSS) vertraut sind, müssen Sie mit Medienobjekten vertraut sein. Mit BEM sieht das Medienobjekt so aus:

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

Aus dieser CSS-Schreibmethode wissen wir bereits, dass sich .mediaimg und .mediabody innerhalb von .media befinden müssen eine andere Form von .mediaimg--rev. Wir können alle oben genannten Informationen einfach über den Namen des .mediaimgCSS-Selektors erhalten.

Ein weiterer Vorteil von BEM besteht in der folgenden Situation:

<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>

Nur ​​aus dem obigen Code verstehen wir die Beziehung zwischen den beiden Klassen .media und .alpha überhaupt nicht. In welcher Beziehung stehen sie zueinander? Ebenso haben wir keine Möglichkeit zu wissen, welche Beziehung zwischen .body und .lede oder zwischen .img-rev

und .media besteht? Aus diesem HTML wissen wir nicht (es sei denn, Sie kennen das Medienobjekt sehr gut), woraus diese Komponente besteht und welche anderen Formen sie hat. Wenn wir diesen Code auf BEM-Art umschreiben:

<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函数使用方法

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der BEM-Syntax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!