Appliquer des styles css provenant de la bdd : bonnes pratiques ?

Bonjour à tous,

Actuellement entrain de développer la partie galerie d'images de mon projet, j'ai mis en place une personnalisation des propriétés css de la part de l'utilisateur en utilisant des variables css, tout fonctionne bien , cependant j'aimerai savoir :

1/ Peut-on simplifier le code js ci-dessous en créant des classes (et cela vaut il le coup ?)
2/ Quelles sont les meilleures pratiques concernant l'initialisation des variables css qui seront lues depuis la bdd, faut-il utiliser le cache navigateur ? si oui, comment ?
3/ N'existe t'il pas une meilleure méthode que du style inline sur chacun des éléments html pour le render dans Twig ex: <div class="galerie"style="background-color:{{galerie.primarybackgroundcolor}}">?

Actuellement je stocke les variables une par une en tant que colonnes dans la bdd par rapport à leur entité, n'existe t'il pas / ne serait il pas préférable d'utiliser une méthode permettant de stocker carrément une liste de propriétés css en une seule fois ?.

Merci d'avance pour votre expertise

galerie.js :

window.onload = () => {
  //Changer la largeur de la galerie
  const inputGalleryWidth = document.querySelector("#galeries_gallery_width");
  inputGalleryWidth.addEventListener("change", () => {
    let width = inputGalleryWidth.value;
    document.documentElement.style.setProperty("--gallery-width", `${width}%`);
  });

  //Changer la couleur de fond d'une galerie d'images
  const inputGalleryPrimaryBackgroundColor = document.querySelector(
    "#galeries_primary_background_color"
  );
  inputGalleryPrimaryBackgroundColor.addEventListener("input", () => {
    let color = inputGalleryPrimaryBackgroundColor.value;
    document.documentElement.style.setProperty(
      "--gallery-primary-background-color",
      color
    );
  });

  //Changer le border-radius des images
  const inputImagesBorderRadius = document.querySelector(
    "#galeries_images_border_radius"
  );
  inputImagesBorderRadius.addEventListener("change", () => {
    let borderRadius = inputImagesBorderRadius.value;
    document.documentElement.style.setProperty(
      "--images-border-radius",
      `${borderRadius}%`
    );
  });

  //Changer l'espacement des images
  const inputGalleryGap = document.querySelector("#galeries_gallery_gap");
  inputGalleryGap.addEventListener("change", () => {
    let gap = inputGalleryGap.value;
    document.documentElement.style.setProperty("--gallery-gap", `${gap}px`);
  });
  //Changer l'épaisseur du bord des images
  const inputImagesBorderWidth = document.querySelector(
    "#galeries_images_border_width"
  );
  inputImagesBorderWidth.addEventListener("change", () => {
    let borderWidth = inputImagesBorderWidth.value;
    document.documentElement.style.setProperty(
      "--images-border-width",
      `${borderWidth}px solid #fff`
    );
  });
  //Choisir le nombre de colonnes
  const inputColumns = document.querySelector("#galeries_gallery_max_columns");
  inputColumns.addEventListener("change", () => {
    let maxColumns = inputColumns.value;
    document.documentElement.style.setProperty(
      "--gallery-max-columns",
      `${maxColumns}`
    );
  });
  //Choisir la hauteur de la galerie
  const inputGalleryHeight = document.querySelector("#galeries_gallery_height");
  inputGalleryHeight.addEventListener("change", () => {
    let maxGalleryHeight = inputGalleryHeight.value;
    document.documentElement.style.setProperty(
      "--gallery-height",
      `${maxGalleryHeight}px`
    );
  });
  //Changer l'ombre de l'image
  const inputImageShadow = document.querySelector("#galeries_images_shadow");
  inputImageShadow.addEventListener("change", () => {
    let imgShadow = inputImageShadow.value;
    console.log(imgShadow);
    document.documentElement.style.setProperty(
      "--images-shadow",
      `${imgShadow}px ${imgShadow}px ${imgShadow}px darkgray`
    );
  });
};