很多人可能听都没听过WEUI和BEM，更别说如何去用了，让我来讲给你听啊。
WEUI
WEUI是腾讯推出的一款前端框架，专为微信Web页面设计。它提供了一套标准化的UI组件和样式，帮助开发者快速构建美观、一致的移动Web应用。WEUI的核心理念是“简单、轻量、可复用”，旨在降低开发成本，提高开发效率。
在使用WEUI框架时，遵循一定的页面结构套路可以大大简化开发工作。以下是一个典型的WEUI页面结构:
<div class="page">
<div class="page__hd">
<h1 class="page__title">页面标题</h1>
<p class="page__desc">页面描述</p>
</div>
<div class="page__bd">
<!-- 页面主体内容 -->
</div>
<div class="page__ft">
<!-- 页面底部内容 -->
</div>
</div>
- page(Block)：页面的整体容器，用于包裹整个页面的内容。
- page__hd(Element): 代表页面头部，通常用于放置标题、导航栏等。
- page__bd(Element)：代表页面主体，放置主要内容。
- page__ft(Element)：代表页面底部，用于放置页面的底部内容。
这种命名的好处是简洁明了，可以快速理解页面的结构和布局。通过将页面分为页头、页脚，可以更好的管理各个部分，提高代码的可维护性，使得开发效率更为高效。
BEM
BEM是一种前端开发流行的命名方法，也是现在的国际命名规范，它的核心思想是将页面划分为可重用的、独立的模块（Block），每个Block由多个元素（Element）构成，Element可以用修饰符（Modifier）来表示不同的状态或变体。
BEM的命名规则如下：
- 块(Block):是一个独立、可重用的功能模块，通常由一个或多个元素组成，可以单独使用，也可以组合使用。Block 是最高级别的抽象，代表一个独立的功能单元。通常是以一个单词命名，使用连字符分割单词，例如： .button、.header、.menu 等。
- 元素(Element):用于表示Block内部的子组件或子元素，是Block的一部分且依赖于Block存在，不能独立使用，必须隶属于某个块。它的命名要使用两个连字符
__用于区分Block和Element。例如：menu__item、menu__list 等。 - 修饰符(Modifier):用于表示Element的不同状态或变体。Modifier 可以应用于Block或Element，用于改变其外观或行为。使用两个连字符
--与块或元素名分隔。例如：button--primary、menu--horizaontal等。
通过使用BEM命名规范可以提高代码可读性、增强代码复用性和可拓展性，在多人协作的项目中，统一的命名规范可以避免命名冲突，提高团队的协作效率。BEM 命名规范通过明确的命名规则，确保每个开发者都能理解其他人的代码。
