避坑指南：微信小程序WeUI样式库那些容易踩的命名规范坑（双下划线篇）

微信小程序WeUI双下划线命名规范深度解析与避坑实践

第一次在项目中引入WeUI框架时，看着文档里密密麻麻的page__hd、weui-flex__item这类带双下划线的类名，我下意识以为这只是普通的CSS命名习惯。直到页面布局莫名其妙错位、组件样式完全失效时，才意识到这些看似简单的双下划线背后藏着整套设计哲学。本文将结合真实项目踩坑案例，带您穿透WeUI的BEM命名体系，掌握那些官方文档没明说的样式规则。

1. WeUI双下划线规范的设计逻辑

微信官方团队在设计WeUI时，采用了改良版的BEM（Block Element Modifier）命名方法论。与常规BEM不同之处在于，WeUI用双下划线替代了传统的单下划线作为连接符。这种设计并非随意为之，而是基于小程序特殊环境的深度考量。

在WeUI的体系结构中，双下划线承担着三种关键角色：

• 层级标识：parent__child表示child元素属于parent块的组成部分
• 样式隔离：防止与小程序原生组件类名冲突（小程序基础库大量使用单下划线）
• 视觉关联：通过命名直观体现UI元素的从属关系

典型的结构示例如下：

<view class="weui-flex">
  <view class="weui-flex__item">左</view>
  <view class="weui-flex__item">右</view>
</view>

对应的CSS规则往往采用属性选择器实现精准匹配：

[class^="weui-flex__"] {
  flex: 1;
}

2. 高频踩坑点