bem--derived from Yandex's CSS naming methodology

One of the most common questions people ask me is what does it mean in CSS class names -- __ ? They came from Bem and Nicolas Gallagher ...

Bem means blocks, elements (element), modifiers (modifier), a front-end naming methodology presented by the Yandex team. This ingenious naming method makes your CSS class more transparent and meaningful to other developers. The BEM naming conventions are more rigorous and contain more information that is used by a team to develop a large, time-consuming project.

It is important to note that the BEM-based naming method 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. Whatever symbols are actually used, they are all based on the same BEM principle.

The naming convention pattern is as follows:

.block{}.block__element{}.block--modifier{}

• .blockRepresents a higher level of abstraction or component.
• .block__elementRepresents the descendants of the. block, used to form a complete. block of the whole.
• .block--modifierRepresents a different state or different version of a. block.

The reason for using two hyphens and underscores instead of one is to allow your own blocks to be defined with a single hyphen, such as:

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

The key to Bem is that by name you can tell other developers what a tag is for. By browsing the class attribute in the HTML code, you can see how the modules are related: some are just components, some are descendants or elements of those components, and some are other forms or modifiers of the component. We use an analogy/model to think about how the following elements are related:

.person{}.person__hand{}.person--female{}.person--female__hand{}.person__hand--left{}

The top-level block is ' person ', which has some elements, such as ' hand '. A person may have other forms, such as women, 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 they are somewhat disjointed. In the case of female, does it mean female human or some kind of female animal? And. Hand, is the pointer to a clock (in English, hand the meaning of a pointer)? Or a hand that's playing solitaire? With Bem we can get more descriptions and clearer structures, and we can know the associations between elements by simply naming them in our code. Bem is really powerful.

Let's look at an example of a previously named "Normal" way. Site-search:

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

These CSS class names are so imprecise that they can't tell us enough information. Although we can use them to get the job done, they are really vague. The BEM notation will look something like this:

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

We can see clearly that there is a called .site-search block, inside of which is a called .site-search__field element. And .site-search There's another kind of pattern called .site-search--full .

Let's give another example ...

If you are familiar with Oocss (object-oriented CSS), then you must be no stranger to media objects. In the Bem way, the media object will look something like this:

.media{}.media__img{}.media__img--rev{}.media__body{}  

From the way this CSS is written, we already know .media__img and .media__body must be in the .media interior, and it's .media__img--rev .media__img another form. We can get all the above information simply by the name of the CSS selector.

Another benefit of BEM is that this is the case:

  <div class= "media" >  "logo.png" Alt=class=" Img-rev "> < div class= "body" > 
 "Alpha" >welcome to Foo corpclass= "lede" >foo Corp is the best, seriously!</p> </div> </div>           

Light from the above code, we don't understand. How does media and. Alpha two classes relate to each other? We also have no way of knowing. What is the relationship between body and. Lede, or. Img-rev
and. Media? From this HTML (unless you know a lot about that media object) We don't know what this component is made of and what other forms it has. If we rewrite this code in BEM way:

  <div class= "media" >  "logo.png" Alt=class=" Media__img--rev "> <div class=" media__body "> 
class= "Alpha" >welcome to Foo Corp
class= "lede" >foo Corp is the Best, Seriously!</p> </ div></div>       

We'll see right away .media . is a block, .media__img--rev is a modifier of .media__img the variant, it belongs .media to the element. .media__bodyIt is an element that has not yet been changed .media . All of this information is understood by their class name, and it seems that BEM is really useful.

It's ugly!

It is often thought that BEM is ugly. I'm sure you'll miss the most important thing if you're ashamed to use it just because the code doesn't look good. Unless you use BEM to make your code unnecessarily difficult to maintain, or if it makes your code harder to read, you'll need to think twice before you use it. However, if it is just "looking a little strange" and in fact an effective means, then we should certainly consider it before development.

Yes, Bem looks really weird, but its benefits far outweigh the flaws in its appearance.

BEM may look a bit funny, and it could lead us to enter longer text (most editors have auto-completion, and gzip compression will let us eliminate the worry about file size), but it's still strong.

With or without a BEM?

I have used the BEM notation in all my projects because its validity has been proven by itself again and again. I also strongly advise others to use BEM because it makes the connection between everything even tighter and makes it easier for the team and even you to maintain the code.

However, when you really use BEM, it's important to remember that you don't need to really use it everywhere. Like what:

.caps{ text-transform:uppercase; }  

This CSS does not belong to any BEM category, it is just a separate style.

Another example of not using BEM is:

.site-logo{}    

This is a logo, we can write it into the BEM format, like this:

.header{}.header__logo{} 

But we don't need to do that. The trick to using BEM is to know when something should be written in BEM format. Because something is really inside a block, it doesn't mean that it is the element in Bem. In this example, the website logo is exactly in the inside of the. Header, it may also be inside the sidebar or footer. The range of an element may start in any context, so you need to be sure that you only use it where you need to use BEM. Let's look at an example:

<div class="content">  
class="content__headline">Lorem ipsum dolor...div> 

In this case, we may just need another class, which we can call it. headline; its style depends on how it is stacked, because it is inside the. Content, or it just happens to be inside the. Content. If it's the latter (that happens to be inside of. Content, not always) we don't need to use BEM.

However, it is possible to potentially use BEM. Let's take a look. Site-logo's example, imagine we want to add a little Christmas to the site, so we want to have a Christmas edition logo. So we have the following code:

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

We can quickly build another version of our code by using the--modifier.

One of the hardest parts of Bem is to clarify where the scope begins and where it ends, and when to use (not use) it. With more contacts, with experience, you will slowly know how to use, these problems are no longer a problem.

Conclusion

So, BEM (or BEM variant) is a very useful, powerful, simple naming convention that makes your front-end code easier to read and understand, easier to collaborate, easier to control, more robust and clear, and more rigorous.

Although Bem looks somewhat odd, it is a valuable tool for front-end developers no matter what the project.

Translator Sign Language: the entire translation according to the original line, and in the process of translation slightly personal understanding of the technology. If the translation has the wrong place, also please peer friend pointing. Thank you!

Extended Reading

By the Desert

1. Yandex Bem/oocss
2. Template components Click to preview
3. Bem:the Block, Element, Modifier approach to decoupling HTML and CSS
4. CSS Methodology and frameworks
5. Maintainable CSS with BEM
6. A New Front-End Methodology:bem
7. What is BEM?
8. Rubbing noses with inuit.css
9. Smacss:notes on Usage
10. What is BEM?
11. The history of BEM
12. Start developing BEM with Project-stub

Original mindbemding–getting your head ' round BEM syntax

Translation David

bem--derived from Yandex's CSS naming methodology