Shulou(Shulou.com)06/02 Report--

This article mainly talks about "what are the naming conventions of BEM". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what are the naming conventions of BEM.

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.

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.

Examples of general naming methods:

Copy the code

Copy the code

This method of writing can understand the meaning of each element in terms of DOM structure and class naming, but it is not clear about its true hierarchical relationship. When defining css, you must also rely on hierarchical selectors to limit the scope of constraints to avoid style contamination across components.

At this point, I believe you have a deeper understanding of "what are the naming conventions of BEM?" you might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.