介绍

BEM的这种命名方式有助于开发者创建自我解释的类名，减少CSS选择器的耦合度，便于在大型项目中多人协作，同时也支持组件的复用，降低了CSS维护的复杂度。

基本命名规则

• Block（块）：代表一个独立的、可复用的组件，如header、button等，命名时使用中划线连接单词，如.block-name。
• Element（元素）：是块的一部分，不能脱离块存在，命名时在其所属的块名后加上双下划线，如.block-name__element-name。
• Modifier（修饰符）：用于表示块或元素的不同状态或变体，命名时在其所属的块或元素名后加上双波浪线，如.block-name--modifier 或 .block-name__element-name--modifier。

优势

• 提高可维护性：通过明确的命名规则，使得代码结构清晰，易于理解与维护。
• 增强可重用性：块的独立性使得它们可以在不同上下文中重复使用，而修饰符则提供了灵活的定制能力。
• 便于团队协作：统一的命名约定减少了沟通成本，使得团队成员能更容易地理解彼此的代码。

WEUI实战

首先我们来看例子

接下来我们拆分其命名

第一步:我们将整个页面看作一个page

第二步:将page分成上下两部分：page_hd 和 page_bd

• 一般我们利用__hd(head)、__bd(body)、__ft(front)来划分三同级块
• 我们将上部分分为page__hd,下部分为page_bd
• 这里我们分为两部分，所以只需要使用__hd , __bd

第三步:继续细分

page__hd中分为page__title和page__desc

page__bd中分为weui-btn_primary、weui-btn_default和weui-btn_warn

补充说明：

若完成第三步，仍可以继续细分，我们可以继续将其分为上下（左右）部分，仍旧命名为__hd、__bd和__ft。

例如下图我们可以分为左右两部分将其命名为weui-media-box__hd和weui-media-box__bd

右边部分可以继续细分。分为上下两部分，我们将其命名为weui-media-box__title和weui-media-box__desc

总结

BEM命名规则为程序员提供了一种高效、规范的代码组织方式，可以提高代码的可读性、可维护性和可扩展性，简化团队协作，并提高代码的可维护性。学习和使用BEM需要一定的时间和经验，但随着技术的不断发展和应用场景的不断扩大，BEM将会成为前端开发中不可或缺的一部分。

今天的分享就到这了，觉得写得还可以的小友留下一个赞来助力我找回脑子。