Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "what is the naming convention of BEM in CSS". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1 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.

1.1 BEM naming pattern

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 {}

1.2 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:

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.

An example of using the BEM naming method:

Through BEM naming, the module hierarchy is simple and clear, and there is no need to make too many hierarchical choices in css writing.

2 how to use BEM naming

2.1When should I use BEM format

The trick with BEM is to know when and what should be written in BEM format.

BEM naming should not be used everywhere. The BEM format should be used when module relationships that are explicitly related are needed.

For example, if it is just a common individual style, there is no point in using the BEM format:

.hide {display: none! important;}

2.2 use BEM format in CSS preprocessor

One of the notches in BEM is that it is named in a long, ugly way and inelegantly written. Compared with the convenience brought by BEM format, we should look at it objectively.

Moreover, generally speaking, CSS is written in preprocessor languages such as LESS/SASS, and it is much easier to write using its language features.

Take LESS as an example:

.article {max-width: 1200px; & _ body {padding: 20px;} & _ button {padding: 5px 8px; &-- primary {background: blue;} &-- success {background: green;}

2.3 use BEM format in components of popular frameworks

In the current popular front-end frameworks such as Vue.js / React / Angular, there are compiling implementations of CSS component-level scopes, the basic principle of which is to use the CSS attribute selector feature to generate different attribute selectors for different components.

When you choose to write in this local scope, the BEM format may seem less important in smaller components. However, for common, global module style definitions, the BEM format is recommended.

In addition, for public components released to the outside world, generally for the sake of style customization, this local scope approach is not used to define component styles. The use of the BEM format at this time will also be brilliant.

2.4 avoid .block _ _ el1__el2 format

Under deeply nested DOM structures, overly long style name definitions should be avoided.

This is the end of the content of "what is the naming convention of BEM in CSS". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.