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

Par Jean Sérien, il y a 1 an

Les bases HTML/CSS
Javascript
PHP Symfony

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` ); }); };

1 réponse

Soundboy39, il y a 1 an

Bonjour,

1/ Peut-on simplifier le code js ci-dessous en créant des classes (et cela vaut il le coup ?)
=> si tu n'a que ce code là côté JS, pas d'intéret, sinon, oui on peut modulariser le code JS et le répartire dans plusieurs fichiers en passant par des systèmes comme Webpack par exemple;

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 ?
=> si tu veux que l'utilisateur récupère son paramétrage quelqu'en soit l'appareil ou le navigateur qu'il utilise, alors oui il faut stocker le paramétrage côté backend, sinon, il faut utiliser le localStorage;

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 ?
=> générer du CSS dans une balise <style> insérée dans la <head>;

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 ?
=> effectivement, il ne parrait pas légitime de faire une colonne en bdd pour chaque propriété CSS, cela complique la maintenance de la base, il vaudrait mieux, de mon point de vuen passer par une seule colonne qui gère tous les styles et utiliser un objet JSON;