Code Style Guide

• Bitte versuchen Sie, Zeilen auf maximal 80 Zeichen zu beschränken.
• Klarheit vor Kürze bei der Benennung von allem bevorzugen.
• Seiten, Partial und Layouts enden mit .liquid oder .md.

MarkupMarkup Permalink

Zum größten Teil verwenden wir LiquidJS und Markdown zum Schreiben von Markup. Wenn Sie irgendwo reguläres HTML verwenden müssen, schreiben Sie HTML5, bevorzugen Sie jedoch einen strengen XHTML-Stil.

• Verwenden Sie wohlgeformtes Markup; Elemente sind ordnungsgemäß verschachtelt und überschneiden sich nicht.
• Schreiben Sie Elemente und Attribute in Kleinbuchstaben.
• Alle Attribute in Anführungszeichen setzen.
• Leere Elemente mit einem Leerzeichen vor dem schließenden Schrägstrich selbst schließen: (<hr />)

StilStil Permalink

Diese Website verwendet Sass in der SCSS-Syntax. Stellen Sie sicher, dass Sie die Klassen verwenden, die wir anbieten, bevor Sie etwas neu schreiben, es sei denn, Sie können dies anders begründen.

• Verwenden Sie den Stil, über den Brad Frost schreibt, für Klarheit.
  • Beachten Sie, dass ältere Klassen diesen Stil noch nicht verwenden, aber wir werden ihn im Laufe der Zeit refaktorieren.
  • Verwenden Sie einen globalen Namespace sl-.
  • Verwenden Sie die Klassenpräfixe, die Harry Roberts befürwortet, obwohl wir einen viel einfacheren Satz verwenden.
    • c- steht für **Komponenten**. Beispiel: sl-c-card.
    • l- steht für **Layouts**. Beispiel: sl-l-grid.
    • is- und has- für Zustände. Beispiel: sl-is-active.
    • js- ist für Klassen, die speziell für die JavaScript-Zielerfassung erstellt wurden. Beispiel: sl-js-toggle-navigation.
  • Verwenden Sie die BEM-Syntax.
    • **Block** – das gesamte Komponentenobjekt. Beispiel: sl-c-card.
    • **Element** – jedes Kind des Blocks. Beispiel: sl-c-card__header.
    • **Modifikator** – jede Variation. Dies kann einem Block zugeordnet werden. Beispiel: sl-c-card--primary. Es kann auch einem Element zugeordnet werden. Beispiel: sl-c-card__header--large.
• Halten Sie Klassen so flach wie möglich und vermeiden Sie zu tiefe Verschachtelungen.
• Vermeiden Sie die Verwendung von Elementselektoren, **es sei denn**, Sie verwenden ein Wrapper-Utility, um alles darin anzusprechen (wie eine Klasse um einen Block von Markdown oder anderen längeren Texten, um alle seine Elemente korrekt zu stylen). Dies ist speziell für Fälle gedacht, in denen die Verwendung von Klassen keinen Sinn ergibt. Seien Sie dabei vorsichtig. Wir können Ihnen in einer Code-Überprüfung Feedback für solche Fälle geben.
• Verwenden Sie für die Benennung von Variablen, Mixins, Platzhalterselektoren oder Klassen den Ansatz von allgemein zu spezifisch. Weitere Details finden Sie in diesem Artikel: dieser Artikel.
• Schreiben Sie durch Kommas getrennte Selektoren auf separaten Zeilen.