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