modifier类是带权重的css类，顺序影响样式覆盖；响应式类需按断点明确组合；语义类不穿透块级容器；v0.9+方向类名后缀顺序调整为“reverse-row”。
Modifier类不是“开关”，是带权重的CSS类叠加
Bulma 的 Modifier 类（如 is-primary、is-outlined、is-light）不是独立生效的布尔开关，而是真实 CSS 类，它们的顺序直接影响最终样式。比如 is-primary is-outlined is-light 这组类，is-light 会覆盖 is-primary 的背景色，但 is-outlined 的边框颜色又依赖 is-primary 定义的变量——一旦顺序错，颜色链就断了。
常见错误现象：button 加了 is-outlined 却没边框，或加了 is-light 后文字消失，大概率是类顺序不对。
- 推荐写法：语义优先，先定基调（
is-primary），再加修饰（is-outlined），最后调光暗（is-light） - 避免把所有 Modifier 堆在一行硬编码；用模板逻辑或工具函数动态拼接时，必须固定顺序
- 调试技巧：在浏览器 Elements 面板里看 computed styles，比对哪条规则被覆盖，反推哪个类“赢了”
响应式 Modifier 必须拆开写，不能靠单个类自动适配
has-text-centered 在桌面端生效，但在移动端不会自动切换为居左或居右——Bulma 没有“智能响应式类”。它只提供断点明确的 Modifier，比如 has-text-centered-touch（≤768px）、has-text-left-desktop（≥1024px），你得自己组合。
常见错误现象：加了 has-text-centered 后，手机上看文字跑偏，还以为是框架 bug。
- 移动端优先？用
has-text-centered-touch has-text-left-desktop - 平板专属？补上
has-text-right-tablet，别指望has-text-right自动识别设备 - 注意
-touch类作用范围是 ≤768px，而-mobile是 ≤769px，差 1px 就可能漏掉关键断点
Modifier 和原生 HTML 元素语义冲突时，效果常被忽略
has-text-centered 对 div 里的文字有效，但对子元素 card 或 box 无效——因为这些是块级容器，文本对齐修饰符不穿透布局层级。
常见错误现象：给 section 加 has-text-centered，结果里面所有卡片还是左对齐。
- 要居中块级子项，改用
is-flex is-justify-content-center - 若坚持用文本类，得把目标元素设为
is-inline-block或is-inline-flex - 在
level、media这类自带结构的组件里乱加has-text-*，容易破坏原有流式布局
Modifier 类名缩写有陷阱，v0.9+ 后方向类已重命名
Bulma v0.9+ 把 is-flex-direction-row-reverse 改成 is-flex-direction-reverse-row，旧项目升级后如果没批量替换，is-flex-direction-column-reverse 这类类会直接失效。
常见错误现象：Flex 容器突然变成默认方向，检查 class 名才发现后缀顺序反了。
- 方向类统一格式：前缀
is-flex-direction-+reverse或row/column，顺序固定为 “reverse-row” 而非 “row-reverse” - 升级时重点 grep：
is-flex-direction.*reverse，别只搜reverse -
is-flex-wrap-wrap依然有效，但is-flex-wrap不是完整类名，少了-wrap就不起作用
Modifier 类的威力在于组合，但组合的前提是理解它本质是 CSS 规则堆叠，不是配置项。最易被忽略的，其实是类名顺序和语义边界——写的时候顺手一排，运行时却卡在某个看不见的层叠权重上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
