如何在BEM规范下仅用paragraph--color修饰符设置<p>内<svg>的fill属性？

首先明确：你之前用的.paragraph--color svg写法其实并没有违反BEM核心原则——BEM只是推荐给块内元素添加明确的类名（比如paragraph__icon）来降低DOM结构依赖，但并非禁止使用后代选择器选择块内的子元素。如果不想新增类，我们可以用CSS的currentColor关键字来优雅实现需求：

/* 给带修饰符的段落设置目标文本颜色 */
.paragraph--color {
  color: #ff4081; /* 替换成你需要的颜色值 */
}

/* 让嵌套的SVG继承段落的文本颜色作为fill值 */
.paragraph--color svg {
  fill: currentColor;
}

为什么这个写法合规？ #

• 修饰符.paragraph--color仅作用于.paragraph块及其内部元素，没有污染全局样式
• 没有依赖无关的DOM结构层级，所有样式都绑定到目标块的修饰符上
• currentColor是CSS原生关键字，自动继承当前元素的color属性值，无需额外维护颜色变量

如果一定要用伪选择器的语法（虽然没必要），可以用:scope伪类（注意浏览器兼容性），效果和上面一致：

.paragraph--color:scope svg {
  fill: currentColor;
}

核心思路就是利用CSS的继承特性，让SVG的fill属性复用修饰符给段落设置的文本颜色，既满足需求又符合BEM的模块化要求。

内容的提问来源于stack exchange，提问作者Rafael Reis Ramos