使用CSS变换构建简洁，可扩展的CSS库

Question

[为了为SVG构建可扩展的CSS库，我研究了CSS属性选择器以处理常见的CSS转换动画。

您可以轻松获取SVG .__svg { width: 1em; height: 1em; }并使用.__svg[class*="--large"] { transform: scale(1.5); }对其进行简要修改，您可以看到我已经面临的问题吗？尽管这可以有效地使用<svg class="__svg" />和<svg class="__svg--large" />，但由于有一个变换将覆盖另一个变换，因此不可能进行多个链式变换。

.__svg[class*="--large"] { transform: scale(1.5); }
.__svg[class*="--rotate"] { transform: rotate(90deg); }

<svg class="__svg--large--rotate" />仅旋转，不缩放。

因此，我只能为一个值利用高性能变换绘画。输入SASS和fixins为我生成库；但是现在保持CSS库简洁的意图已经完全消散。

.__svg[class*="--large"] { transform: scale(1.5); }
.__svg[class*="--rotate"] { transform: rotate(90deg); }
.__svg[class*="--large--rotate"] { transform: scale(1.5) rotate(90deg); }

[我希望在很多方面，任何可链接的CSS值都可以像JS一样利用散布运算符。您将如何构建一个常用选择器的CSS库，并将选择器保持在最低限度？

Answer 1

我不确定如果不使用javascript，是否可以实现。

但是使用少量的javascript绝对有可能。

工作示例：

// Build an object of all the transforms
const svgTransforms = {

  '--large' : 'scale(1.5)',
  '--rotate' : 'rotate(90deg)'
}

// Build an array of all the transform names
const svgTransformNames = Object.keys(svgTransforms);

// Add transforms to each SVG element, according to classList
let svgElements = [... document.getElementsByClassName('__svg')];

for (let svgElement of svgElements) {

  let svgElementTransforms = [];

  for (let svgTransformName of svgTransformNames) {

    if (svgElement.classList.contains(svgTransformName)) {

      svgElementTransforms.push(svgTransforms[svgTransformName]);
    }
  }
  
  svgElement.style.transform = svgElementTransforms.join(' ');
}

.__svg {
display: inline-block;
width: 40px;
height: 60px;
margin: 24px;
background-color: rgb(255, 0, 0);
}

<div class="__svg --large"></div>
<div class="__svg --rotate"></div>
<div class="__svg --large --rotate"></div>