BEM修饰符是附加在块或元素上描述外观或状态的可选类名，必须与基础块名共存；尺寸修饰符如card--small仅覆盖width、padding、font-size等关键属性，需配合基础类使用且命名须对齐设计系统。
什么是BEM修饰符，它和尺寸类名的关系
BEM修饰符（modifier）是附加在块（block）或元素（element）上、用于描述其外观或状态的可选类名。它不改变结构，只改变表现——比如 card--small 和 card--large 都是同一 card 块的不同视觉变体。
关键点在于：修饰符必须和基础块名一起出现，不能单独使用。写成 card--small 是对的；只写 card--small 而不带 card，CSS 就无法定位到对应元素。
常见错误现象：
– 卡片尺寸没变化，检查是否漏写了基础类 card
– 样式被覆盖，往往因为修饰符 CSS 选择器权重不够，或顺序写反了（修饰符规则必须在基础块规则之后）
如何定义尺寸修饰符的CSS规则
推荐用独立的修饰符类控制尺寸，避免在每个尺寸下重复写所有样式。核心思路是：基础块设默认尺寸，修饰符只覆盖 width / padding / font-size 等关键属性。
立即学习“前端免费学习笔记（深入）”；
.card {
padding: 16px;
font-size: 14px;
width: 320px;
}
.card--small {
padding: 8px;
font-size: 12px;
width: 240px;
}
.card--large {
padding: 24px;
font-size: 16px;
width: 480px;
}
注意事项：
– 不要用 !important 强行覆盖，靠声明顺序和选择器一致性更可靠
– 尺寸值尽量用相对单位（如 rem 或 em），方便响应式扩展
– 避免在修饰符里重写颜色、边框等与尺寸无关的属性，否则会破坏可维护性
HTML中怎么组合使用基础类和尺寸修饰符
必须同时包含块名和修饰符，且语义清晰。不要省略基础类，也不要嵌套多个尺寸修饰符（card--small card--large 是冲突的）。
正确写法：
– <div class="card card--small">…</div>
– <div class="card card--large">…</div>
容易踩的坑：
– 把修饰符当独立组件用，比如 <div class="card--small"> → 样式失效<br>– 在 JS 动态添加类时漏掉基础类，例如只加 <code>card--medium 而没保留 card
– 使用构建工具（如 PostCSS）自动补全类名时，未配置 BEM 插件识别修饰符语法，导致压缩后类名错乱
要不要为尺寸修饰符加媒体查询？
纯 BEM 修饰符本身不处理响应式，它是“明确指定尺寸”的静态开关。如果需要“小屏下自动变小”，就不能只靠 card--small，而应结合媒体查询或容器查询（@container）。
推荐做法：
– 用修饰符表达设计系统中的明确尺寸档位（small / medium / large）
– 用媒体查询做断点适配，例如在 max-width: 480px 下让所有 card 默认应用 card--small 的效果
– 若用现代 CSS，可用 @container (min-width: 300px) 配合 container-type: inline-size 实现更精准的上下文响应
性能提示：过多的媒体查询尺寸组合会让 CSS 体积膨胀，优先用修饰符覆盖主要场景，再用少量断点兜底。
最常被忽略的一点：尺寸修饰符的命名要和设计系统对齐。别自己定义 card--tiny，而设计文档里叫 size-xs —— 这会导致协作混乱，连 class 名都得查文档才能用对。
