CSS BEM - Class 用于 SVG

Question

我正在尝试为我的 SASS/CSS 文件使用 BEM 样式。一切正常，但我在设置 SVG 文件样式时遇到问题。

BEM 说不应该有标签或 ID 选择器，只有 class 选择器。但是，我想为我的 SVG 提供不同的颜色，有时还需要不同的宽度和高度。

目前我只能使用这样的标签选择器来做到这一点：

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

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

HTML:

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

你知道更好的方法吗？

Answer 1

好吧...对于这种特殊情况，您可以删除元素级别 css....

width: 100%, height: 100% 可以移动到 normalize.css/reset.css 你写元素级别 css.

此外，在 normalize.css/reset.css.[=15= 中，fill: #fff; fill-opacity: .8; 可以替换为 color: currentColor; ]

Normalize.css

svg {
    color: currentColor;
    width: 100%;
    height: 100%;
}

现在您可以在 .block__icon.

中添加 color: rgba(255, 255, 255, 0.8)

您还可以在 svg 中使用 viewbox 属性，以防您需要调整要渲染的图标的大小。

我的建议是：如果 svg 标签不在您的控制范围内，则使用元素级别 css 完全可以向其添加 class。无论方法论多么强大，凡事都有例外。 :)

Answer 2

您可以删除 div 并直接设置 svg 的样式。使用修饰符，您可以更改 svg 的外观，例如颜色或大小：

<svg class="block__icon block__icon--large"></svg>

我会这样构建 css：

.block {
  &__icon {
    height: 36px;
    width: 36px;
    fill: #fff;
    fill-opacity: .8;

    &--color-blue {
      color: blue;
    }

    &--large {
      height: 72px;
      width: 72px;
    }
  }
}

CSS BEM - Class 用于 SVG

CSS BEM - Class for SVG

html

css

svg

sass

bem