如何命名CSS图标库的各种规格_使用BEM修饰符统一控制大小尺寸-css教程-PHP中文网

应使用 block-size，因图标作为独立块需逻辑尺寸控制，block-size适配不同书写模式，而element-size非标准css属性。

如何命名css图标库的各种规格_使用bem修饰符统一控制大小尺寸

图标尺寸该用 block--size 还是 element--size

图标作为独立可复用单元，必须定义为 icon 块（block），而不是其他组件的子元素。所以尺寸控制应落在 icon--size-sm 这类块级修饰符上，而非 button__icon--size-sm。后者把尺寸逻辑绑定到按钮上下文，导致同一图标在导航栏、弹窗、卡片里要重复写三套修饰符，也违背“block 独立存在”原则。

常见错误现象：user-avatar__icon--large —— avatar 本身已是 block，它的 icon 子节点若只服务自身且不对外暴露接口，才可作 user-avatar__icon；但一旦这个图标被抽成通用图标库，它就必须升格为独立 icon 块。

判断依据：删掉这个图标，功能是否缺失？能否在 footer、sidebar、modal 中无修改复用？是 → 它就是 icon block
尺寸变体属于键值型修饰符，必须带语义化值：icon--size-sm、icon--size-lg，禁用 icon--large（布尔型）或 icon--24px（含技术单位）
不要用 icon__svg--size-sm：SVG 是实现细节，不是语义元素；icon 块内部结构由组件封装，外部只关心“它是什么”，不关心“怎么画”

如何避免 .icon--size-sm 和 .icon--size-lg 样式互相覆盖

BEM 修饰符只作用于挂载它的那个节点，.icon--size-sm 不会自动影响其子元素，但如果你在 CSS 中写了后代选择器，比如 .icon--size-sm svg { width: 16px; }，而另一处又写了 .icon--size-lg svg { width: 24px; }，就可能因 CSS 加载顺序或 specificity 导致覆盖。

正确做法是让每个修饰符类直接控制自身节点的样式变量，再由内部元素消费：

.icon {
  --icon-size: 20px;
}
.icon--size-sm {
  --icon-size: 16px;
}
.icon--size-lg {
  --icon-size: 24px;
}
.icon svg {
  width: var(--icon-size);
  height: var(--icon-size);
}