What is the naming convention for BEM

This article mainly introduces "what is the naming convention of BEM". In the daily operation, I believe that many people have doubts about what the naming convention of BEM is. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "what is the naming convention of BEM?" Next, please follow the editor to study!

What is the BEM naming convention

Bem is an abbreviation for block, element, and modifier, a front-end CSS naming methodology proposed by the Yandex team.

BEM is a simple and useful naming convention. Make your front-end code easier to read and understand, easier to collaborate, easier to control, more robust and clear, and more rigorous.

BEM naming mode

The pattern of the BEM naming convention is:

.block {}

.block _ _ element {}

.block-- modifier {}

Block represents a higher level of abstraction or component.

Block__element represents the descendants of .block and is used to form a complete .block whole.

Block--modifier represents different states or versions of .block.

Use two hyphens and underscores instead of one so that your own blocks can be defined by a single hyphen. Such as:

. sub-block__element {}

.sub-block--modifier {}

Benefits of BEM nomenclature

The key to BEM is that you can get more descriptions and clearer structures, and you can know the meaning of a tag from its name. Thus, you can see the association between elements by looking at the class attribute in the HTML code.

Example of using the BEM naming convention:

Copy the code

Copy the code

At this point, the study of "what is the naming convention of BEM" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!