cssStyleSheet

[LeuS]

Допустим у меня есть N-ное количество элементов DOM с классом, например, switchableVisibility {...}
Могу ли поменять видимость с {visibility: visible;} на {visibility: hidden;} или наоборот?
Не перебирая элементы через .querySelectorAll или ещё как, не меняя стили или добавляя стили через .classList.add/remove каждому элементу, а поменять свойство самого стиля класса? Как то через document.styleSheets чтобы одним движением поменять видимость всем элементам с этим классом?
На MDN пишут, что cssStyleSheet.insertRule(`${selector} {${styles}}`, 0); теперь deprecated, хотя всеми браузерами поддерживается. Но в любом случае я что-то не пойму как пользоваться .insetRule для смены правила.

[Nexus]

Необязательно взаимодействовать с CSSRule, чтобы изменять стили, можно сделать как-то так:

<style>
.square {
  --bg: red;
  
  display: inline-block;
  width: 20px;
  height: 20px;
  background: var(--bg);
}
</style>
<style id="runtime-styles"></style>

<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>

<div>
  <button type="button">Switch color</button>
</div>

<script>
var color = 'red';

document.querySelector('button')?.addEventListener('click', () => {
  const selector = '#runtime-styles';
  const styleNode = document.querySelector(selector);
  if (!styleNode) {
  	return void console.error(`Element [${selector}] not found`);
  }
  
  styleNode.textContent = `.square {--bg: ${color = (color === 'red' ? 'blue' : 'red')}}`;
});
</script>

На MDN пишут, что cssStyleSheet.insertRule [...] теперь deprecated

Что-то не вижу такого.
https://developer.mozilla.org/en-US/...ule/insertRule

[Severtain]

Как вариант, можно создавать <style> на странице и задавать условия для Вашего класса. Главное не плодить их при изменениях, а перезатирать уже добавленный (можно через атрибут пометить dom)