tuto root frimelda

Bonjour à vous :minicoeur:

On ne va pas se mentir, quiconque ici ayant déjà eu à éditer son CSS pour le mettre aux couleurs du nouveau design peut sûrement en témoigner : c'est chiant et fastidieux d'aller chercher toutes les valeurs à modifier pour mettre à jour le forum. Vraiment, c'est une plaie infâme. Alors permettez-moi d'y remédier et de vous rendre la tâche plus agréable et rapide avec ces quelques conseils et ce tuto.

I. PRÉAMBULE

Tout d'abord, vous allez devoir faire le tri et scinder en deux votre CSS : entre ce qui ne bougera très certainement pas dans le futur ou pas de manière régulière (la taille d'un élément, sa position, ses marges, ...), de ce qui bougera à chaque changement de design (couleurs de background ou autre, fonts, ...). L'idéal étant d'appliquer cette méthode dès la création de votre forum pour que tout soit déjà clair et ordonné, et que vous pensiez à cette organisation en amont de la création du forum. Sinon vous pouvez aussi le faire avec un forum existant à condition d'avoir du temps et de la patience.

II. :ROOT

Vous avez fait le tri, vous savez à peu près ce que vous aller devoir modifier de manière régulière, très bien ! :roockon:

Vous allez maintenant créer cette propriété dans votre page CSS, en la plaçant de préférence tout en haut de celle-ci de manière à ce qu'elle soit toujours la première chose que vous verrez :

Code:

:root {

}

Dans cette propriété, vous allez mettre absolument TOUT le CSS qui sera amené à être modifié de manière régulière. Mais pas n'importe comment ! Vous allez devoir déclarer une variable pour chaque propriété CSS, comme ceci :

Code:

:root {
    --color-titre: grey;
    --qeel-background-color: #000000;
    --pa-padding: 5px 42px;
    .... ect
}

Par exemple, si vous avez plusieurs éléments communs qui ont la même couleur (la toolbar, le qeel, ...) vous pouvez créer une seule variable pour regrouper tout ces éléments et leur donner la même couleur :

Code:

:root {
    --background-principaux: blue;
}

Si vous regroupez ainsi plusieurs éléments, l'idée est de donner un nom de variable aussi clair et précis que possible pour bien vous y retrouver par la suite et savoir à quoi elles correspondent.

Mais ça ne suffit pas encore, il nous reste une dernière étape pour que le code fonctionne.

III. VAR()

Vous avez créé et déclaré vos variables grâce à :root, mais il faut maintenant les appliquer.
Par exemple, imaginons que vous avez déclaré ceci :

Code:

:root{
  --main-bg-color: red;
}

Normalement, si vous voulez appliquer un fond rouge à un élément, vous le déclarer comme ceci dans le CSS :

Code:

.div{
background-color: red;
}

Mais plus maintenant. Souvenez-vous qu'on veut éviter de disperser ce type de propriétés partout dans votre code, afin de les rassembler au même endroit. Ainsi, au lieu de donner directement la couleur rouge à votre élément, on remplacera le code comme ceci :

Code:

.div {
  background-color: var(--main-bg-color);
}

On remplace ainsi la couleur par la propriété var() avec le nom de la variable dont vous avez besoin. Et voilà ! La prochaine fois que vous voudrez changer la couleur de cet élément, vous n'aurez qu'à modifier directement la propriété de la variable.

MOT DE LA FIN

Je présente cette spécificité CSS dans l'idée qu'elle sera principalement utilisée pour faciliter la mise à jour d'un design, mais il est évident que si vous le souhaitez, vous pouvez élargir son champs d'application selon vos besoins et envies.

De plus cette propriété est normalement bien intégrée et supportée, vous ne devriez donc pas avoir de soucis.

N'hésitez pas à laisser un petit mot si ce tuto vous a intéressé ou si vous pensez qu'il mérite quelques éclaircissement sur les explications/exemples.



Suggestion/idée de @XynPapple :

XynPapple a écrit:

La partie vraiment cool avec les variables, c'est qu'elles peuvent être éditée via du JS dynamiquement (donc mises à jour automatiquement par le navigateur). Ca peut donc être super pratique pour ceux qui veulent tenter des dark mode sur leur forum ou éditer des variables selon certaines circonstances :luuv: Ca permet du coup en éditant seulement une petite partie de votre CSS (votre :root) de pouvoir modifier instantanément la majorité du style de votre forum (imaginez un forum ou votre personnage a un certain nombre de points de vie, et quand votre personnage est au bord de la mort, le design du forum change soudainement pour refléter l'état de votre personnage. A quel point se serait cool hein?

Précision de @NyxBanana

Code:

Peut-être mentionner aussi qu'une variable peut-être utilisée dans des lignes css nécessitant plusieurs information comme border ? ♡

Effectivement, cela fonctionne comme du CSS normal. C'est juste qu'on le place à un endroit différent et qu'on l'appelle avec la variable. Vous pouvez donc très bien écrire et empiler normalement les propriétés d'un border-style "10px solid grey" etc... ou autre.