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

This article mainly explains the "case analysis of BEM naming conventions in CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "case analysis of BEM naming conventions in CSS".

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.

-dash: used only as a hyphen to indicate a connection mark between multiple words of a block or a child element.

_ _ double underscore: a child element used to connect a block to a block.

_ single underscore: a single underscore is used to describe a block or a state of a block's child elements.

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.BEM naming mode

The pattern of the BEM naming convention is:

.block {}

.block _ _ element {}

.block-- modifier {}

Each block name should have a namespace (prefix)

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

How to use BEM nomenclature

1. When 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 {displayplay noneyed importance;}

two。 Using 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:5px8px

&-- primary {background:blue;}

&-- success {background:green;}

}

}

3 use BEM format in components of popular frameworks

In the current popular Vue.js/React/ 'Angular and other front-end frameworks, there are compiling implementations of CSS component-level scope, and their basic principle 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.

4 avoid the format of .block _ _ el1__el2

DOM nested at a deep level

Structure, overly long style name definitions should be avoided.

The final level should not exceed level 4, otherwise it will increase the difficulty of reading comprehension.

III. Summary

One of the hardest parts of BEM is figuring out where the scope starts and ends, and when to use it or not. With the accumulation of experience in constant use, you will gradually know how to use it, and these problems are no longer a problem. There is no good or bad technology, the right side is the best.

Recommended writing method and style

/ / normal writing method:

.xxx {}

.xxx _ _ item {}

.xxx _ _ item_current {}

/ / nested writing

.xxx _ _ item_current.mod-xxx__link {}

Recommended:

.xxx {}

.xxx _ _ item {}

.xxx _ _ item_hightlight {}

.xxx _ _ product-name {}

.xxx _ _ link {}

.xxx _ _ ming-zi-ke-yi-hen-chang {}

/ / nested writing

.xxx _ _ item_current {

.xxx _ _ link {}

}

/ / the corresponding HTML structure is as follows:

Subparagraph 1

I am the name.

Look at the class name

I'm link.

Second item and current selection

I am the name.

I'm link.

The third item is specially highlighted.

I am the name.

I'm link.

Thank you for reading, the above is the content of "case analysis of BEM naming convention in CSS". After the study of this article, I believe you have a deeper understanding of the problem of instance analysis of BEM naming convention in CSS, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.