BEM ideology thoroughly understands BEM syntax and bem syntax

BEM ideology thoroughly understands BEM syntax and bem syntax

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

It is important to note that the BEM-based naming method I used was modified by Nicolas Gallagher. This naming technology introduced in this article is not the original BEM, but it is a simplified version that I prefer. No matter what symbols are actually used, they are all based on the same BEM principle.

The naming conventions are as follows:

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

• .blockRepresents a higher level of abstraction or component.
• .block__elementRepresents the descendant of. block, used to form a complete. block.
• .block--modifierIt indicates different States or versions of. block.

The reason for using two hyphens and underscores instead of one is to allow your own block to be defined by a single hyphen, for example:

. Site-search {}/* block */. site-search _ field {}/* element */. site-search -- full {}/* modifier */

The key to BEM is to tell other developers what a tag is for by name. By browsing the class attributes in HTML code, you can see how modules are associated: some are only components, and some are descendants or elements of these components, there are also other forms or modifiers of components. We use an analogy/model to think about how these elements are associated in NLP:

.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 also have other forms, such as female, which in turn will have its own elements. Let's write them as 'regular 'CSS:

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

These 'normal' CSS are meaningful, but there is a gap between them. Take female as an example. Does female mean female humans or some female animals? Also, is hand a clock pointer )? Or a card player? With BEM, we can get more descriptions and clearer structures. We can know the associations between elements simply by naming them in our code. BEM is really powerful.

Let's take a look at an example of. site-search named in the 'normal' method:

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

These CSS class names are too inaccurate to tell us enough information. Although we can use them to complete our work, they are indeed vague. The BEM mark method will look like this:

<form 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 clearly see that.site-searchBlock, Which is internally called.site-search__field. And.site-searchAnother form is.site-search--full.

Let's give an example ......

If you are familiar with OOCSS, you must be familiar with media objects. In BEM mode, the media object will look like this:

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

From the CSS writing, we already know.media__imgAnd.media__bodyMust be located in.mediaInternal, and.media__img--revYes.media__img. You can obtain all the above information by using the CSS selector name.

Another advantage of BEM is to address the following situation:

<div class="media">    <div class="body">    

From the code above, we do not understand how. media and. alpha classes are associated with each other? We also do not know between. body and. lede, or. img-rev
What is the relationship between and. media? From this section of HTML (unless you know the media object very well), we do not know what the component is composed of and what other forms it has. If we rewrite this code using BEM:

<div class="media">    <div class="media__body">    

We can understand immediately.mediaIs a block,.media__img--revIs a modifier.media__imgIt belongs.media. While.media__bodyIs a record that has not been changed.media. All of the above information can be understood through their class names. From this perspective, BEM is indeed very useful.

Ugly!

BEM is often considered ugly. I dare say that if you are ashamed to use this code just because it does not look very nice, you will miss out on the most important things. Unless you use BEM to make the code more difficult to maintain, or do so to make the code more difficult to read, you have to think twice before using it. However, if "It looks a little strange" and in fact it is an effective means, we should fully consider it before development.

Yes, BEM looks strange, but its benefits far exceed its appearance flaws.

BEM may seem a bit funny and may lead to longer text input (most editors have auto-complementing functions, and gzip compression will eliminate worries about the file size ), but it is still powerful.

Use or not use BEM?

I have used the BEM mark method in all my projects because its validity has been proved by itself again and again. I also strongly recommend that you use BEM, because it makes the connection between everything more closely, so that the team and even you can easily maintain the code.

However, when you actually use BEM, it's important to remember that you don't have to use it everywhere. For example:

.caps{ text-transform:uppercase; }  

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

Another example that does not use BEM is:

.site-logo{}    

This is a logo. we can write it in BEM format, as shown below:

.header{}.header__logo{} 

But we don't have. The trick to using BEM is to know when something should be written in BEM format. Because something is indeed inside a block, it does not mean that it is the element mentioned in BEM. In this example, the Website logo is exactly inside. header, and it may also be in the sidebar or footer. The range of an element may start with any context, so make sure that you only use it where you need to use BEM. Let's look at another example:

<div class="content">  

In this example, we may only need another class, which can be called. headline; its style depends on how it is stacked, because it is in. content; or it just happens to be in. content. If it is the latter (that is, it happens to be inside the. content, rather than always), we do not need to use BEM.

However, BEM is potentially used for everything. Let's take a look at the. site-logo example. Imagine we want to add a Christmas atmosphere to the website, so we want to have a Christmas logo. So we have the following code:

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

We can use the -- modifier to quickly build another version for our code.

One of the most difficult parts of BEM is to determine the start and end of the scope, and when to use it (not to use it. With more contacts and accumulated experience, you will gradually know how to use them, and these problems are no longer a problem.

Conclusion

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

Although BEM looks a little strange, it is a valuable tool for front-end developers for any project.

 

From: https://segmentfault.com/a/1190000000391762