Design: UI Component Naming

Grundprinzip

Prinzipien der Namenskonventionen Die Namen von Komponenten sollten funktional und für jeden Stakeholder verständlich sein. Das wird erreicht, indem die gewählten Namen

• logisch
• skalierbar
• einfach
• und standardisiert sind.

Hinweis: Namen sollten lieber länger und dadurch besser zuzuordnen sein, als zu kurz und nicht aussagekräftig.

Zusammensetzung

Zusammensetzung des Namens einer Komponente

1. Zugehörigkeit bzw. Art der Komponente (damit diese in den Assets in entsprechende Ordner sortiert werden)
2. inhaltlicher Bezug
3. Typ der Komponente (siehe Typen-Übersicht)
4. falls keine anderweitige Unterscheidung möglich: Aussehen der Komponente (Größe + Styleguide)

Beispiele:
content/recipeTeaserCardS
content/recipeTeaserCardM
input/buttonPrimary
content/recipeTeaserCardCarousel
input/search

Hinweis: Die Art der Komponente sollte immer im Singular angegeben werden (nicht “Inputs” sondern “Input”).

Worttrennung

Trennung von Wörtern im Namen: In den Namen von Komponenten werden die verschiedenen Bestandteile zusammengeschrieben.

Beispiele: buttonPrimary, recipeCard, filterTag

Do

• alle Wörter im Namen zusammen schreiben
• erstes Wort im Namen in Kleinbuchstaben
• alle darauffolgenden Wörter beginnen mit einem Großbuchstaben

Don’t

• Trennung von Wörtern anhand eines Leerzeichen, Bindestrichs, etc.
• alle Wörter im Lower-/Uppercase

Größenangaben

xxs xs s m (default) l xl xxl

Die Größe wird im Namen angegeben, sobald eine Komponente in mehreren Größen mit demselben Inhalt erstellt wird. Der Zusatz im Namen wird anhand von T-Shirtgrößen angegeben (xxs-xxl).

Hinweis: Es sollte berücksichtigt werden, dass nachträglich eine weitere Größe hinzukommen kann. Damit eine Zwischenstufe eingefügt werden kann, sollten die Größenbezeichnungen vorausschauend gewählt werden.

Do

• T-Shirtgrößen verwenden
• Abkürzungen nutzen

Don’t

• Größe ausschreiben (z.B. small)
• eine Größe mehrfach verwenden

States/Zustände