如何在BEM规范下使用类选择器为SVG设置样式？

这问题我太有共鸣了——既要死守BEM「只使用类选择器」的规矩，又要给SVG调整尺寸和颜色，用标签选择器总觉得破坏了规范的纯粹性对吧？给你几个完全符合BEM要求的靠谱方案：

方案1：给SVG直接添加BEM类名 #

这是最直接也最贴合BEM理念的做法，把SVG当成块里的独立元素来定义类：

HTML #

<div class="block__icon">
  <svg class="block__icon-svg" ...></svg>
</div>

CSS/SASS #

.block__icon {
  height: 36px;
  width: 36px;
}

.block__icon-svg {
  width: 100%;
  height: 100%;
  fill: #fff;
  fill-opacity: .8;
}

BEM允许块下存在多层元素类名，只要类名能清晰反映它属于哪个块、是什么元素，完全符合规范。而且这么做的好处是，哪怕以后把SVG换成其他图标元素（比如<img>或者<i>），只要替换类名对应的元素，样式逻辑不用改，耦合度极低。

方案2：用CSS变量实现灵活的样式复用 #

如果你的图标需要根据不同状态切换颜色/透明度，用CSS变量能让代码更简洁，同时保持BEM规范：

HTML #

<div class="block__icon">
  <svg class="block__icon-svg" ...></svg>
</div>
<!-- 带状态的图标 -->
<div class="block__icon block__icon--active">
  <svg class="block__icon-svg" ...></svg>
</div>

CSS/SASS #

.block__icon {
  height: 36px;
  width: 36px;
  /* 定义默认变量 */
  --svg-fill: #fff;
  --svg-fill-opacity: .8;
}

/* 状态修改变量 */
.block__icon--active {
  --svg-fill: #2ecc71;
  --svg-fill-opacity: 1;
}

.block__icon-svg {
  width: 100%;
  height: 100%;
  fill: var(--svg-fill);
  fill-opacity: var(--svg-fill-opacity);
}

这种方式不用写多个重复的SVG类，只要通过修改父元素的变量就能控制图标样式，非常适合需要多状态的场景。

为什么不推荐标签选择器？ #

BEM禁止标签/ID选择器的核心原因是降低结构与样式的耦合——如果用了svg选择器，哪天产品要求把图标换成<img>标签，你就得修改CSS选择器；但用类选择器的话，只需要替换HTML里的元素，样式完全不受影响，维护成本低很多。

内容的提问来源于stack exchange，提问作者Theiaz