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! 🫶🏻

short answer: maybe because we're actually having fun!

long answer: we started doing this decades ago at this point, like 2007. and sure, ai does generate amazing code and can save a lot of time. but there's almost no learning effect if you just copy and paste something you don't understand.

some people (thankfully) still prefer figuring things out themselves. not just pasting code from ai without knowing how it works. because if you don't understand it, you also can't really fix things when they break! and believe me, things do break all the time when you're actually coding something.

and I know, hard to believe, but there are still people who intentionally avoid AI and prefer using things made by other people, partly because it's also a way of supporting and appreciating someone else's work.

hope this doesn't come across as rude, but "why bother" is kind of a rude question too, don't you think? 🫶🏻

also, while ai is great for finding bugs or optimizing stuff, it's really easy to get used to it. and then you slowly start unlearning things. writing and coding manually, the "old way", kind of protects you from that. 😅

and let's be honest, ai probably won't stay free forever. getting fully dependent on something you don't actually understand, especially if you can't code without it, sounds like a bad idea, doesn't it?

sure thing! ✨ if you still need help, feel free to contact us! 🫶🏻