Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03646.jsonl.gz/666

Inhaltsverzeichnis
Allgemeine Grundsätze
Beim Schreiben von Quellcode steht die Lesbarkeit im Vordergrund. Damit andere Entwicklerinnen und Entwickler den Quellcode nachvollziehen können und einheitliche Formatierungen verwendet werden, halten wir uns an folgende Grundsätze:
Vorteile:
- Schreibe Quellcode so konzis wie möglich.
- Halte dich an die vorgegebenen Konventionen zur Benennung (Naming Conventions).
- Gruppiere zusammengehörige Blöcke von Code mit einer Leerzeile dazwischen.
- Verwende Encoding und Einrückungen gemäss der Definition in .editorconfig (UTF-8, 2 Leerschläge).
- Beachte sprachspezifische Best Practices.
Untergliederung
Wir verwenden eine vereinfachte Form von Atomic Design.
Atome
Atome sind im Code des Design Systems nicht weiter teilbare Einheiten. Sie enthalten lediglich HTML und CSS, aber keine JavaScript-Logik.
Klassen für Atome erhalten das Block-Präfix «atm-».
Module
Module sind im Code des Design Systems zusammengesetzte Einheiten, die aus verschiedenen Atomen oder weiteren Modulen bestehen können.
Klassen für Module erhalten das Block-Präfix «mdl-».
Layouts
Layouts sind im Code des Design Systems das HTML-Grundgerüst einer Seite. Layouts enthalten kein eigenes CSS und keine JavaScript-Logik.
Klassen für Layouts erhalten das Block-Präfix «lyt-».
Seiten
Seiten sind Kollektionen von Modulen, die mit einem Layout zu einer vollständigen Seite gerendert werden.
Markup
Wir verwenden Handlebars Templates. Valides, semantisches HTML ist das oberste Gebot.
Naming Convention für Klassen
Wir verwenden BEM (Block, Element, Modifier) als Naming Convention:
- Block / Blöcke: block
- Element / Unterelemente in Blöcken: block__element
- Modifier / Zustände, Darstellungsformen, Verhaltensweisen: block--modifier