docs: Coding-Regeln für Alicia ergänzt (Namen, JS, CSS, HTML, Kommentare)

2026-06-28 23:50:49 +02:00
parent d5fd7f4b7e
commit 08de66a67c
1 changed files with 35 additions and 0 deletions
@@ -156,6 +156,7 @@ git push --tags

 ## Constraints (unveränderlich)

+### Technisch
 - ❌ Keine zweite Datei (kein .css, kein .js)
 - ❌ Keine externen Libs/CDNs (kein jQuery, kein React, kein Bootstrap)
 - ❌ Kein Build-Step, kein npm
@@ -163,3 +164,37 @@ git push --tags
 - ✅ JS `<script>` am Ende von `<body>`
 - ✅ `localStorage` für Persistenz
 - ✅ Eine HTML-Datei, die im Browser per `file://` läuft
+
+### Coding-Regeln (bindend!)
+
+**Variablen & Funktionen — lesbare Namen**
+- ❌ `C`, `ts`, `fm`, `sv`, `ld`, `at`, `rv`, `rb`, `op`, `cl`, `rs`, `ri`, `rp`, `pf`, `ie`
+- ✅ `COLUMNS`, `showToast`, `formatDate`, `saveState`, `loadState`, `applyTheme`, `renderView`, `renderBoard`, `openModal`, `closeModal`, `renderStreaks`, `renderInsights`, `registerPalette`, `previousFocus`, `isEditing`
+- **Jede Variable und Funktion MUSS einen selbsterklärenden Namen haben.** Keine Abkürzungen unter 4 Zeichen.
+
+**JavaScript**
+- ✅ `const`/`let` — NIE `var`
+- ✅ `===` statt `==`
+- ✅ Template-Literals `` `Hallo ${name}` `` statt `'Hallo ' + name`
+- ✅ Arrow-Funktionen `() => {}` wo sinnvoll
+- ✅ `for...of` statt `for(var i=0;...)` wo möglich
+- ❌ Kein `eval()`, kein `innerHTML` mit ungeprüftem Input
+- ❌ Keine globalen Variablen (alles in IIFE oder Modul-Scope)
+
+**CSS**
+- ✅ CSS-Variablen (`var(--bg)`) nutzen — NIEMALS Farben hartkodieren
+- ✅ Dark Mode NUR über `[data-theme="dark"]` und `prefers-color-scheme`
+- ✅ `rem`/`em` für Schrift, `px` nur für Borders, `%`/`fr`/`vh`/`vw` für Layout
+- ❌ Kein `!important`
+- ❌ Keine Inline-Styles im HTML (alles im `<style>`-Block)
+
+**HTML**
+- ✅ Semantisch: `<aside>`, `<nav>`, `<main>`, `<section>`, `<dialog>` wo passend
+- ✅ ARIA-Labels für interaktive Elemente ohne sichtbaren Text
+- ✅ `tabindex` nur wo nötig, korrekte Reihenfolge
+- ❌ Kein `<div onclick="...">` — immer `addEventListener` in JS
+
+**Kommentare**
+- ✅ Jede Funktion hat EINEN Satz darüber, was sie tut
+- ✅ Komplexe Logik (Streak, DnD, Chart) hat 2-3 Zeilen Erklärung
+- ❌ Keine auskommentierten Code-Blöcke