Detailed explanation of BEM syntax

This time I will bring you a detailed explanation of BEM syntax. What are the precautions when using BEM syntax? The following is a practical case, let's take a look.

BEM means block, element, and modifier. It is a front-end naming methodology proposed by the Yandex team. This clever naming method makes your CSS classes more transparent and meaningful to other developers. BEM naming conventions are more strict and contain more information, and they are used by a team to develop a large and time-consuming project.

It is important to note that the BEM-based naming scheme I used was modified by Nicolas Gallagher. The naming technique described in this article is not the original BEM, but it is an improved version that I prefer. Regardless of the actual notation used, they are all based on the same BEM principles.

The naming convention pattern is as follows:

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

• .block represents a higher level abstraction or component.

• .blockelement represents the descendants of .block and is used to form a complete .block as a whole.

• .block--modifier represents different states or different versions of .block.

The reason you use two hyphens and an underscore instead of one is so that your own blocks can be delimited with a single hyphen, like this:

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

BEM The key is that the name alone can tell other developers what a certain tag is used for. By browsing the class attribute in HTML code, you can understand how modules are related: some are just components, some are descendants or elements of these components, and some are other forms or modifications of components. symbol. Let's use an analogy/model to think about how the following elements are related:

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

The top-level block is 'person', which holds some elements such as 'hand'. A person will also have other forms, such as a female form, which in turn will have its own elements. Below we write them as 'regular' CSS:

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

These 'regular' CSS are meaningful, but there is a bit of a disconnect between them. Take .female as an example. Does it refer to a female human being or some kind of female animal? And .hand, is it talking about the hands of a clock (Annotation: hand means hands in English)? Or a hand playing cards? Using BEM we can get more description and a clearer structure, and we can know the relationship between elements just through the naming in our code. BEM is really powerful.

Let’s look at another example of .site-search named in the ‘conventional’ way:

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

These CSS class names are really imprecise and don’t tell us enough information. While we can get the job done with them, they are really vague. Using BEM notation, it will look like this:

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

We can clearly see that there is a block called .site-search, and inside it is a block called .site -element of searchfield. And .site-search also has another form called .site-search--full.

Let’s give another example...

If you are familiar with OOCSS (Object-orientedCSS), then you must be familiar with media objects. Using BEM, the media object will look like this:

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

From this CSS writing method, we already know that .mediaimg and .mediabody must be It is located inside .media, and .mediaimg--rev is another form of .mediaimg. We can get all the above information just through the name of CSS selector.

Another benefit of BEM is for the following 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>

Just from the above code, we don’t understand how the two classes .media and .alpha interact with each other. Inter-related? Similarly, we have no way of knowing what the relationship is between .body and .lede, or between .img-rev
and .media? From this HTML (unless you know the media object very well) we don't know what this component is composed of and what other forms it has. If we rewrite this code in BEM way:

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

The above is the detailed content of Detailed explanation of BEM syntax. For more information, please follow other related articles on the PHP Chinese website!