Flutter中BEM实践要求Widget类名用小写中划线如user_profile_card，变量名遵循block__element模式，Modifier通过构造参数而非类名表达，StyleSheet键名严格对应Block上下文，禁止文件夹式Element拆分，主题切换由Theme统一管理而非CSS类名。
Flutter里怎么给Widget类和变量套BEM逻辑
Flutter没有CSS作用域，但类名、变量名、State字段命名一样会污染协作认知。直接用 UserCard 或 HeaderTitle 作为Widget名，等于放弃上下文隔离——你改 UserCard 的 padding，可能让 SearchResultItem 里的同名子组件也错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- Widget类名用小写+中划线格式，如
user_profile_card（不是UserProfileCard），和CSS Block名对齐，方便后续生成样式类或调试时一眼对应 - 内部子Widget变量名严格遵循
block__element模式：比如在user_profile_card.dart中，头像控件命名为_avatar，用户名控件命名为_name，不加前缀；但若需跨组件复用（如_status_badge在多个卡片里出现），就该单独抽成status_badgeWidget，而非塞进父类里硬编码 - Modifier不写进类名，而用构造参数表达状态：
UserProfileCard(isExpanded: true)比UserProfileCardExpanded更符合BEM精神——后者是新Block，前者是同一Block的变体
RN中StyleSheet和组件名如何对齐BEM语义
RN的 StyleSheet.create() 是CSS的替代品，但很多人把 styles.container 这种泛名当默认写法，结果 container 在首页、详情页、弹窗里各有一套定义，最终靠 specificity 和加载顺序“赌”谁生效。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- StyleSheet对象名必须带Block上下文，如
userProfileStyles、searchResultItemStyles，禁止用commonStyles或baseStyles这类全局桶 - 样式键名照搬BEM规则：
userProfileStyles.name✅，userProfileStyles.userName❌（冗余）；userProfileStyles.nameHighlighted❌（这是Modifier，应拆成userProfileStyles.name+userProfileStyles.nameHighlighted两个独立键，或用条件合并） - Modifier状态不靠新增样式键，而靠运行时组合：
[userProfileStyles.name, isHighlighted && userProfileStyles.nameHighlighted]，这和React里用classnames的思路一致
为什么不能把BEM直接平移成文件夹结构
看到设计稿有个“用户信息卡片”，就建 lib/widgets/user_profile_card/ 目录，再在里面放 avatar.dart、name.dart ——这种结构看似BEM，实则埋雷。因为BEM的Element（如 __avatar）不能脱离Block独立存在，但单独拆成文件后，avatar.dart 很容易被其他模块 import 并误用，破坏语义边界。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 一个Block对应一个Dart/JSX文件，所有Element逻辑写在内部，用私有字段（
_avatar）或局部Widget函数封装，不export - 真需复用的Element（如
status_badge），必须提升为独立Block，有自己的文件、自己的Props、自己的测试用例，而不是从父目录里“抄一份” - 文件名用
user_profile_card.dart，不是UserProfileCard.dart，避免和JSX组件命名风格冲突，也方便grep定位
动态主题下Modifier该怎么处理
RN或Flutter里切换深色模式时，有人写 button--dark 这种CSS类名，但在原生渲染层，它只是个字符串。真正的问题是：Modifier值是否可预测、是否绑定到明确作用目标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 禁止用颜色值或尺寸值作Modifier名，如
buttonPrimaryColor或textSize16——这些该由Theme.of(context).textTheme 或 StyleSheet中的 design token 控制 - Modifier只描述行为或业务状态：
buttonDisabled、cardExpanded、inputError，且必须和Widget的Props一一对应 - 深色模式本身不是Modifier，而是全局Theme状态；组件只需响应
ThemeMode，并在内部用Theme.of(context).colorScheme计算样式，不暴露--dark到类名层级
user_profile_card 能不能成为Block，取决于它是否在三个以上页面复用、是否有独立数据模型、是否能脱离父级单独测试——这些判断比双下划线语法重要得多。 
