Конкатенация строк в CSS

Вы не можете выполнить динамическую интерполяцию строк таким образом, как вы предполагаете. Однако, если у вас есть ограниченное количество возможных значений для атрибута [type], вы можете создать стили для каждого из них:

.your .selector[type="foo"] {
    background-image: url('../img/icons/foo_10.png');
}
.your .selector[type="bar"] {
    background-image: url('../img/icons/bar_10.png');
}
.your .selector[type="baz"] {
    background-image: url('../img/icons/baz_10.png');
}

Если у вас есть слишком большое количество типов, вам, вероятно, нужно будет придумать более эффективное решение, чем то, что я перечислил здесь.

Я не думаю, что это возможно. В свойстве content вы можете "конкатенировать" значения, просто разделяя их пробелом, но в других местах такой возможности, похоже, нет. Что, безусловно, жаль.

Наиболее оптимальным решением будет указать этот стиль в атрибуте style каждый раз, когда используется атрибут type.

Нет, вы не можете сделать это только с помощью CSS, потому что язык CSS не имеет управляющих структур или чего-то подобного, что позволило бы динамически генерировать CSS-код.

Вместо этого вы можете использовать решения на JavaScript или решение, основанное на CSS-переменных, которые генерируются с помощью PHP.

Можно предложить решение для конкатенации строк для свойства URL в CSS, не учитывая attr('type') каждого элемента, вот пример:

// Вы можете преобразовать все пути в нужный формат в JS:
let rootElement = document.querySelector('#my-root-element');
for (const [prop, val] of rootElement.computedStyleMap()) { 
  if (prop.startsWith('--var-')) {
    var updatedValue = `url("${'../img/icons/' + val}")`;
    console.log(updatedValue);
    rootElement.style.setProperty(prop, updatedValue);
  }
};

for (const child of rootElement.children) {
  child.textContent = window.getComputedStyle(child).getPropertyValue('background-image');
}

В вашем CSS вы можете определить некоторые переменные таким образом:

#my-root-element {
  --var-a: btn_10a.png;
  --var-a-img: img_10a.png;
  --var-b: btn_10b.png;
  --var-c: btn_10c.png;
  --var-d: btn_10d.png;
}

#my-button-a {
  background-image: var(--var-a);
}

#my-button-a-img[type="img"] {
  background-image: var(--var-a-img);
}

#my-button-b {
  background-image: var(--var-b);
}

#my-button-c {
  background-image: var(--var-c);
}

.my-button {
  display: block;
  margin: 10px;
}

div#my-button-a-img {
  border: 1px solid black;
  display: inline-block;
}

Допустим, ваш HTML выглядит так:

<div id="my-root-element">
  <button class="my-button" id="my-button-a" type="button"></button>
  <div class="my-button" id="my-button-a-img" type="img"></div>
  <button class="my-button" id="my-button-b" type="button"></button>
  <button class="my-button" id="my-button-c" type="button"></button>
</div>

Вот ссылка на пример: CodePen.

Если у вас есть дополнительные вопросы, не стесняйтесь задавать!