1. First of all, let’s introduce what is BEM
Two weeks ago, I didn't know what BEM was. In the past two weeks, I studied systematically with the teacher and searched on the Internet. I saw people's comments on it were mixed. Says it's more transparent and makes more sense for developers, but others say it's bloated and ugly. But I think BEM standardizes the naming, and makes the front-end code easier to read and understand, and it is extensible, which is convenient for team collaboration and post-maintenance. Now I will talk about my understanding of BEM. The picture below is what I kept when I first came into contact with BEM.
1.BEM means block, element, modifier, and is a front-end naming methodology proposed by the [Yandex] team. 2. BEM B: Block (block) E: Element (element) M: Modifier (modifier) and use __
and --
connection between the three modules (for the sake of _
distinction -
: should the word hyphen of CSS class name use underscore or horizontal bar? Please refer to:blog.csdn.net/risingwonde…
2. Why use BEM
- specification
- Today's code world can already be said to be a super huge family, so a big family must have rules and regulations, otherwise it is disorganized and difficult to manage, and BEM plays an indispensable role in it. It makes everything more connected and makes it easier for teams and even you to maintain code.
- Semantic
-
It can make the code clear at a glance Is the following code obvious at a glance?
.person{} /*人*/ .person__hand{} /*人的手*/ .person--female{} /*女人*/ .person--female__hand{} /*女人的手*/ .person__hand--left{} /*人的左手*/ 复制代码
-
But what if this was the case?
.person{} .hand{} .female{} .female-hand{} .left-hand{} 复制代码
-
short summary
The learning of CSS BEM is the only way for us to set foot on the first-tier factories. We must abide by the norms in order to grow. As the so-called state-owned and national laws, families have family rules, and our code industry must also have rules. This is only the first thing we learn. Item, there will be thousands in the future. I am still relatively good at the moment, but which big factory programmer does not come out step by step, aiming at the big factory, carefully study the code specifications and details, work hard to roll a volume, and make it big factory!