You know BEM, do you use it every time?

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.

Screenshot 2022-04-10 192013.png
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

  1. 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.
  2. 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{}    
      复制代码
    Is it difficult to understand, hand refers to hand or pointer, female is female or female, female-hand is female or female hand? Left-hand what's the left hand, or the left of the pointer?

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!

Guess you like

Origin juejin.im/post/7084951614431166494