What do you think about the way BEMs are named in CSS?

The consciousness of BEM is block (block), element (element), modifier (modifier), which is a CSS Class naming method proposed by the yandex team.

There is a reason for the existence of any thing. If it is worthless, it will definitely be eliminated, and future generations may not understand it, or even appear in the world of future generations.

What do you think about the way BEMs are named in CSS?

The biggest controversy about BEM naming is its naming style, which encourages very specific, but long, level-by-level writing. Such frequent naming will affect the writing efficiency. If the name is too long, the amount of code will increase, and the file size will become larger (this is not a problem under gzip), which will affect the transmission speed and the user experience. Professionals We can not simply use personal preferences and habits as an excuse to reject or deny its use.

The style is not very important to the user, the key is to see its effect. As the so-called "do not look at the course of treatment, look at the curative effect" as people often say.

 

In terms of scalability, too many nestings are difficult to read, and it is difficult to read more than 3 layers; the more nesting, the more levels of selectors will increase, so the performance will be worse unknowingly; such a long It is difficult to conflict with names and writing.

From a programming principle, this naming does not expose abstract classes. If the style changes, you need to inherit another abstract class, you don't need to change the HTML, you only need to change the CSS.

 

In team development, style is nothing more than a form that can constrain people to achieve a certain degree of unity. Internal communication will greatly reduce communication costs.

 

Although the BEM naming method has its own shortcomings, at least he can achieve a certain unity when we name it, and we can learn its excellent aspects and use it for our own use. It is not a bad thing to use it skillfully and flexibly in actual project development.

Source: Qianfeng HTML5

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325005330&siteId=291194637