First, what is BEM

Before two weeks, I don’t know what is BEM, this two week, systematic study and follow the teacher also go online search on the Internet to see people mixed to the evaluation of it, some people say it more transparent and more meaningful for developers, but also some people said it was too fat, very ugly. But I think BEM standardizes naming and makes the front end code easier to read and understand and extensible for team collaboration. Here is my understanding of BEM. The picture below is the one I kept from my first encounter with BEM.



1.BEM stands for block, element, or modifier, and is a front-end naming methodology proposed by the [Yandex] team. BEM B:Block E:Element M:Modifier used between the three modules__ 与--Connect (to_and-Distinguish: CSS class name word hyphen choose underscore or slash? Please refer to:Blog.csdn.net/risingwonde…

Why use BEM

  1. specification
    • In today’s code world, it can be said that there is a super large family, so a large family must have rules and regulations, otherwise it is messy and difficult to manage, and BEM plays an indispensable role in it. It makes everything more connected, making it easier for the team and even you to maintain your code.
  2. semantic
    • It makes it easy to see if the code below is obvious at first glance

      . The person {} / * * /. Person__hand {} the hand of the / * * /. Person - getting {} / * * /. Woman person - female__hand {} / * a woman's hand * /. Person__hand - left {} /* Human left hand */Copy the code
    • But what if this is the case?

      .person{}
      .hand{}
      .female{}
      .female-hand{}
      .left-hand{}    
      Copy the code

    Is it hard to understand, hand refers to hand or pointer, female is female or female, female-hand is female or female hand? Left hand of something, or left hand of the pointer?

A small summary

CSS BEM and learning is the way we set foot on a line of companies, we have to comply with the specifications, to grow, is the so-called state-owned national law, the home has rules, code we also want to have rules, this is just the first of our study, then thousands, now I also compare, but which programmers not step by step to come out of a consortium, aiming at giant, Conscientiously study good code specifications, details, and strive to roll a roll, chong Dachang!