erstmal danke fürs kompliment! <3 ich hab den wunsch als erledigt markiert, aber vielleicht schreibe ich trotzdem mal ein ausführlicheres tutorial dazu! eigentlich ist es ganz simpel 🫶🏻
ich erklärs mal hier, damit du nicht so lange warten musst (wir arbeiten momentan am neuen design für designfreaks):
der sinn von den custom properties ist, dass man die werte
wiederverwenden kann und zentral an einer stelle hat. im prinzip kann man "fast alles" als property oben definieren und dann mit var() im rest seiner css datei benutzen. "ob es nötig ist", kommt also immer darauf an, wie viele farben man hat und wie oft sich diese wiederholen. aber du kannst darauf auch komplett verzichten und die farben "normal" reinschreiben.
anstatt also bei allen elementen
padding: 15px zu schreiben, kannst du oben
ein einziges mal --padding: 15px festlegen und dann bei allen anderen elementen, z.b. deinem content,
padding: var(--padding); schreiben.
wenn du irgendwann mal den wert ändern möchtest, musst du ihn nur
ein einziges mal oben im
:root {} bereich ändern, anstatt überall in der ganzen css datei.
alle properties schreibst du also in den
:root bereich - das bedeutet,
diese werte sind für alle anderen elemente global zugänglich.
das einzige, was du beachten musst, ist, dass du
keine sonderzeichen im namen benutzt, also z.b. nicht "--überschrift". leerzeichen und ähnliches sind ebenfalls nicht erlaubt. also am besten die namen immer schön simpel halten. 😅
und zu deiner frage "wann und wo": eigentlich immer dann, wenn sich werte oder farben wiederholen. das hängt vom design ab, aber meistens hat man ja eine grundpalette, also z.b. dass alle boxen hellgrau sind oder dass man eine akzentfarbe hat. damit musst du nicht immer wieder den gleichen hexcode an 20 verschiedenen stellen einfügen, sondern definierst ihn
einmal oben als property.
das ganze klappt wie gesagt mit fast allem, was sonst auch bei css erlaubt ist - bildern, verläufen und so weiter. 🥰
:root {
--padding: 15px;
--accent-color: #85BCFF;
--bg-light: #EEEEEE;
--bg-dark: #222222;
--header-image: url('header.png');
}
/* und dann einfach im rest vom css verwenden */
#container {
background: var(--bg-dark);
padding: var(--padding);
}
#header {
background: var(--header-image);
}
besonders hilfreich wird das, wenn man auf seiner webseite einen "light/dark mode toggle" hat, denn dann brauchst du nicht durch hunderte farbcodes gehen, sondern änderst sie nur oben einmalig. ☺️ ein tutorial
dazu hab ich
hier geschrieben, falls es dir hilft.
falls du noch fragen hast, kannst du dich gerne nochmal melden oder mich einfach bei discord anschreiben! 🫶🏻