Wie man bessere Namen für Variablen, Funktionen und Klassen schreibt – Mit Beispielen

Die Benennung ist eine der wichtigsten und herausforderndsten Teile beim Schreiben von sauberem, wartbarem und skalierbarem Code. Ein durchdachter Variablenname kann beispielsweise als selbst dokumentierender Code fungieren und Zeit und Mühe beim Verständnis der Logik sparen. Schlecht gewählte Namen können hingegen zu Verwirrung und Fehlern führen.

Dieser Artikel dient als umfassender Leitfaden, wie sinnvolle Namen für Klassennamen, Variablen und Funktionen mit Beispielen und bewährten Praktiken gefunden werden können.

Warum ist die Benennung wichtig?

• Lesbarkeit: Gute Namen machen Ihren Code intuitiv und reduzieren die Lernkurve für andere.

• Wartbarkeit: Es ist einfacher, gut benannten Code zu refaktorisieren oder zu debuggen.

• Zusammenarbeit: Klare Namen verbessern die Teamkommunikation und Produktivität.

• Skalierbarkeit: Aussagekräftige Namen helfen dabei, große Projekte handhabbar zu halten.

Verschiedene Stile von Namenskonventionen

Verschiedene Stile von Namenskonventionen sind entscheidend für die Verbesserung der Code-Lesbarkeit und -Wartbarkeit in verschiedenen Programmiersprachen.

Stile wie camelCase, PascalCase, snake_case und kebab-case sind auf spezifische Kontexte und Praktiken zugeschnitten.

camelCase wird häufig für Variablen und Funktionen verwendet, während PascalCase für Klassen bevorzugt wird. snake_case ist in Python wegen seiner Klarheit beliebt, und kebab-case dominiert CSS für das Styling von HTML-Elementen.

Jeder Stil gewährleistet Konsistenz und macht den Code für Teams und zukünftige Entwickler intuitiv. Hier ist eine kurze Zusammenfassungstabelle einiger beliebter Benennungskonventionen zusammen mit ihren Anwendungsfällen und Beispielen:

So wählen Sie den richtigen Stil aus

1. Sprachspezifisch: Befolgen Sie die Konventionen Ihrer Programmiersprache oder Ihres Frameworks. Zum Beispiel:

   • JavaScript: camelCase für Variablen und Funktionen, PascalCase für Komponenten.

   • Python: snake_case für Variablen und Funktionen.

   • CSS/HTML: kebab-case für Klassennamen und IDs.

2. Team- oder Projektrichtlinien: Konsistenz ist entscheidend. Verwenden Sie den vereinbarten Stil für Ihr Team oder Projekt.

3. Zweckspezifisch: Verwenden Sie Bezeichnungsstile, die die benannte Entität am besten repräsentieren (zum Beispiel Konstanten in SCREAMING_SNAKE_CASE).

Allgemeine Benennungsrichtlinien

Bevor wir uns in spezifische Benennungskonventionen für Klassennamen, Variablen und Funktionen vertiefen, wollen wir einige universelle Prinzipien erkunden:

1. Sei beschreibend und prägnant: Namen sollten den Zweck oder die Rolle der Variable/Funktion/etc. vermitteln:

    // Schlecht
    let x = 10;
   
    // Gut
    let maxUsersAllowed = 10;
   

2. Vermeiden Sie kryptische Abkürzungen, die für andere Entwickler schwer zu verstehen sein könnten (oder sogar für Ihr zukünftiges Selbst):

    // Schlecht
    let usrNm = "John";
   
    // Gut
    let userName = "John";
   

3. Verwenden Sie konsistente Benennungskonventionen: Wählen Sie einen Benennungsstil (camelCase, PascalCase, kebab-case, snake_case) und halten Sie sich im gesamten Projekt daran.

4. Vermeiden Sie reservierte Schlüsselwörter oder verwirrende Namen:

    // Schlecht
    let let = 5;
   
    // Gut
    let variablenName = 5;
   

Okay, jetzt wo wir die Grundlagen behandelt haben, lassen Sie uns tiefer in einige hilfreiche Namenskonventionen eintauchen.

Wie man gute Klassennamen erstellt

Klassennamen definieren das visuelle oder strukturelle Verhalten von Elementen in Ihrer Anwendung. Klare Klassennamen zu schreiben, stellt sicher, dass Ihr HTML und CSS leicht verständlich und wartbar sind.

1. Verwenden Sie beschreibende Namen

Klassennamen sollten den Zweck des Elements beschreiben, nicht sein Aussehen.

<!-- Schlecht -->
<div class="red-button"></div>

<!-- Gut -->
<div class="primary-button"></div>

2. Folgen Sie der BEM (Block-Element-Modifier) Methodik

BEM ist eine beliebte Konvention für das Schreiben von skalierbarem und wartbarem CSS. Es trennt Komponenten in:

• Block: Stellt die Komponente dar (zum Beispiel card).

• Element: Stellt Kind-Elemente des Blocks dar (zum Beispiel card__title).

• Modifier: Stellt Variationen des Blocks oder Elements dar (zum Beispiel card__title--highlighted).

Beispiel:

<div class="card">
  <h1 class="card__title card__title--highlighted">Welcome</h1>
  <p class="card__description">This is a card component.</p>
</div>

3. Verwende kebab-case

CSS-Klassennamen werden traditionell in kebab-case geschrieben, um die Lesbarkeit zu verbessern.

<!-- Schlecht -->
<div class="primaryButton"></div>

<!-- Gut -->
<div class="primary-button"></div>

Wie man gute Variablennamen erstellt

Variablen speichern Daten und sollten aussagekräftige Namen haben, die beschreiben, was sie darstellen.

1. Verwende Substantive für Variablen

Variablen sind typischerweise Substantive, da sie Entitäten oder Daten darstellen.

// Schlecht
let a = "John";

// Gut
let userName = "John";

2. Verwende Präfixe, um Kontext hinzuzufügen

Das Hinzufügen von Präfixen hilft, den Typ oder Zweck einer Variablen zu verdeutlichen:

• Boolesch: ist, hat, kann

• Zahlen: max, min, gesamt

• Arrays: Verwenden Sie die Pluralformen (zum Beispiel, benutzer, artikel).

Beispiel:

let isUserLoggedIn = true;
const maxUploadLimit = 5; // MB
const usersList = ["John", "Jane"];

3. Vermeiden Sie generische Namen

Vermeiden Sie Namen wie daten, wert oder element, es sei denn, sie sind notwendig.

// Schlecht
let data = 42;

// Gut
let userAge = 42;

Wie man gute Funktionsnamen erstellt

Funktionen führen Aktionen aus, daher sollten ihre Namen die Operation oder den Prozess widerspiegeln, den sie ausführen.

1. Verwenden Sie Verben für Funktionen

Funktionen sind handlungsorientiert, daher sollten ihre Namen mit einem Verb beginnen:

// Schlecht
function userData() {
  // ...
}

// Gut
function fetchUserData() {
  // ...
}

2. Seien Sie spezifisch über die Funktionalität

Funktionsnamen sollten angeben, was sie tun.

// Schlecht
function handle() {
  // ...
}

// Gut
function handleFormSubmit() {
  // ...
}

3. Verwenden Sie Präfixe für die Absicht

• Für Ereignisbehandlungen: handle, on

• Für Hilfsprogramme: calculate, convert, format

• Für Abrufoperationen: fetch, get, load

• Für Setter und Getter: set, get

Beispiel:

function handleButtonClick() {
  console.log("Button clicked!");
}

function calculateDiscount(price, discountPercentage) {
  return price * (discountPercentage / 100);
}

Wie man erkennt, ob ein Name für eine Variable, Funktion oder Klasse geeignet ist

Um zu verstehen, ob ein Name für eine Variable, Funktion oder Klasse geeignet ist, ist es wichtig, ihn anhand mehrerer wichtiger Prinzipien zu bewerten. Hier ist ein Leitfaden, um Ihnen zu helfen zu entscheiden, ob ein Name in Ihrem Programmierkontext angemessen und aussagekräftig ist:

1. Repräsentiert es den Zweck?

Zweckorientierte Namen sind das wichtigste Merkmal eines guten Namens. Ein Name sollte sofort sagen, was die Variable, Funktion oder Klasse repräsentiert oder tut, ohne dass zusätzliche Kommentare oder Dokumentationen gelesen werden müssen.

Wie man bewertet:

Fragen Sie sich: „Wenn ich diesen Namen lese, verstehe ich sofort seinen Zweck?“

Beispiel:

• userAge ist besser als a, weil userAge sagt Ihnen, was die Variable repräsentiert, während a zu unklar ist.

2. Ist es spezifisch genug?

Der Name sollte spezifisch genug sein, um die genaue Rolle der Entität in Ihrem Code widerzuspiegeln. Zu allgemeine Namen wie data oder temp können verwirrend sein, da sie nicht genügend Kontext bieten.

Wie man bewertet:

Fragen Sie: „Ist dieser Name spezifisch für das, was diese Variable, Funktion oder Klasse in meiner Anwendung repräsentiert?“

Beispiel:

• calculateTaxAmount() ist besser als calculate(), weil klar ist, was die Funktion berechnet.

3. Folgt es einer konsistenten Namenskonvention?

Konsistenz bei Namenskonventionen ist entscheidend. Wenn alle Teammitglieder denselben Konventionen folgen, ist der Code einfacher zu verstehen und zu navigieren.

Wie man bewertet:

Frage: „Ist dieser Name konsistent mit den Namenskonventionen, die im Rest des Projekts verwendet werden?“ Befolgen Sie Projektanleitungen wie:

• camelCase für Variablen und Funktionen (z. B. userAge)

• PascalCase für Klassen (z. B. UserProfile)

• GROSSBUCHSTABEN_SNAKE_CASE für Konstanten (z. B. MAX_USERS)

Beispiel:

• Wenn Ihr Team camelCase verwendet, ist userData besser als UserData.

4. Vermeidet es Mehrdeutigkeit?

Ein guter Name beseitigt Mehrdeutigkeiten. Er sollte nicht für verschiedene Interpretationen offen sein. Wenn er in verschiedenen Kontexten unterschiedliche Dinge bedeuten kann, führt dies zu Verwirrung.

Wie man bewertet:

Frage: „Könnte jemand, der nicht mit dem Code vertraut ist, falsch interpretieren, worauf sich dieser Name bezieht?“

Beispiel:

• Verwenden Sie anstelle von isValid für einen booleschen Wert isUserLoggedIn oder isEmailVerified, um klarer zu machen, was überprüft wird.

5. Ist es einfach zu lesen und auszusprechen?

Obwohl nicht unbedingt erforderlich, kann die Lesbarkeit und Aussprache die Gesamtlesebarkeit und Wartbarkeit Ihres Codes verbessern.

Wie man bewertet:

Fragen Sie: „Ist dieser Name leicht vorzulesen und verstehe ich ihn auf den ersten Blick?“

Vermeiden Sie lange Namen und verwenden Sie nur gebräuchliche Abkürzungen, wenn sie weit verbreitet sind.

Beispiel:

• maxRetries ist besser als maximumNumberOfAttemptsToReconnect.

6. Vermeidet es Redundanz?

Vermeiden Sie Redundanz in Namen. Wiederholen Sie keine Informationen, die bereits impliziert oder durch den Kontext beschrieben werden.

Wie man bewertet:

Fragen Sie: „Wiederhole ich Informationen, die bereits aus dem umgebenden Kontext klar sind?“

Beispiel:

• Wenn Sie eine Klasse namens User haben, ist es redundant, eine Methode userGetData() zu benennen. Verwenden Sie stattdessen getData().

7. Ist es selbst dokumentierend?

Die besten Namen dokumentieren sich selbst. Gute Namen reduzieren die Notwendigkeit für zusätzliche Kommentare oder Erklärungen.

Wie man bewertet:

Fragen Sie: „Beschreibt dieser Name vollständig die Variable, Funktion oder Klasse, ohne einen Kommentar zu benötigen, der erklärt, was es tut?“

Beispiel:

• calculateTotalPrice ist selbsterklärend, daher ist kein zusätzlicher Kommentar wie „Diese Funktion berechnet den Gesamtpreis nach Rabatt.“ erforderlich.

8. Ist es kontextbezogen und relevant für die Domäne?

Der Name sollte zum Kontext Ihres Projekts und seiner Domäne passen. Zum Beispiel können Namenskonventionen für eine Webanwendung von denen für eine mobile App oder ein Machine-Learning-Modell abweichen.

Wie man bewertet:

Fragen Sie: „Passt dieser Name zur Domäne und zum Kontext meines Projekts?“

Wenn Sie in einer spezifischen Domäne arbeiten (zum Beispiel Finanzen, Gesundheit, Gaming), verwenden Sie domänenspezifische Begriffe, die leicht erkennbar sind.

Beispiel:

• In einer Gaming-App ist healthPoints passender als hp, da es seine Bedeutung widerspiegelt.

9. Ist es zukunftssicher?

Denken Sie darüber nach, wie sich Ihr Code weiterentwickeln wird. Namen sollten flexibel genug sein, um zukünftige Änderungen aufzunehmen, ohne Refactoring zu erfordern.

Wie man bewertet:

Fragen Sie: „Wird dieser Name auch dann noch sinnvoll sein, wenn sich die Funktionalität ändert oder das Projekt wächst?“

Beispiel:

• userInfo könnte veraltet werden, wenn sich die Datenstruktur ändert. Es ist besser, userProfile zu verwenden, wenn Sie erwarten, dass weitere Felder hinzugefügt werden.

10. Vermeidet er magische Zahlen und fest codierte Werte?

Magic numbers (Zahlen mit unklarer Bedeutung) sollten zugunsten benannter Konstanten vermieden werden.

Wie man bewertet:

Fragen Sie: „Stellt dieser Name eine sinnvolle Konstante dar oder handelt es sich nur um eine Rohzahl?“

Beispiel:

• Verwenden Sie anstelle von 1000 eine Konstante wie MAX_FILE_SIZE, um die Bedeutung hinter der Zahl zu erklären.

Praktische Beispiele

CSS Beispiel

Das folgende CSS-Beispiel zeigt, wie man die BEM (Block-Element-Modifier)-Namenskonventionen anwendet, um eine strukturierte und skalierbare Klassenhierarchie in Ihrem Stylesheet beizubehalten:

<!-- HTML -->
<div class="navbar">
  <ul class="navbar__list">
    <li class="navbar__item navbar__item--active">Home</li>
    <li class="navbar__item">About</li>
    <li class="navbar__item">Contact</li>
  </ul>
</div>

/* CSS */
.navbar {
  background-color: #333;
  padding: 10px;
}

.navbar__list {
  list-style: none;
}

.navbar__item {
  display: inline-block;
  padding: 10px;
}

.navbar__item--active {
  color: orange;
}

Das passiert in diesem Code:

• BEM-Namensgebung: navbar ist der Block, der das Hauptnavigationskomponente repräsentiert.

• navbar__list ist das Element, ein Kind des Blocks, das die Liste der Navigationspunkte repräsentiert.

• navbar__item ist ein weiteres Element, das einzelne Listenelemente repräsentiert.

• navbar__item--active ist ein Modifier, der verwendet wird, um das aktive Menüelement hervorzuheben.
  Dieser Ansatz macht es einfach, Beziehungen und Rollen innerhalb des HTML und CSS zu verstehen, und unterstützt modulare und wiederverwendbare Stile.

JavaScript-Beispiel

Dieses JavaScript-Beispiel zeigt, wie man sinnvolle und konsistente Namenskonventionen für Variablen und Funktionen verwendet, um den Code selbsterklärend zu machen:

// Variablen
let isUserLoggedIn = false;
const maxAllowedItems = 10;

// Funktionen
function fetchUserDetails(userId) {
  // Benutzerdaten von der API abrufen
}

function calculateTotalPrice(cartItems) {
  return cartItems.reduce((total, item) => total + item.price, 0);
}

Hier ist, was im Code passiert:

• Variablen:

  • isUserLoggedIn: Eine boolesche Variable, die benannt wurde, um ihren Zweck deutlich anzuzeigen. Das Präfix is hilft, sie als boolesche Variable zu identifizieren.

  • maxAllowedItems: Eine Konstante mit einem Großbuchstaben max Präfix zeigt, dass es sich um eine Grenze handelt, und macht ihre Absicht klar.

• Funktionen:

  • fetchUserDetails(userId): Der Name spiegelt den Zweck der Funktion wider, nämlich Benutzerdetails abzurufen. Der Parameter userId ist beschreibend und vermeidet Mehrdeutigkeiten.

  • calculateTotalPrice(cartItems): Der Funktionsname gibt explizit die durchgeführte Aktion an. Der Parameter cartItems ist in Bezug auf die E-Commerce-Domäne relevant.

Warum das gut ist: Diese Konventionen gewährleisten, dass der Code lesbar und intuitiv ist und die kognitive Belastung für andere Entwickler, die an demselben Projekt arbeiten, reduziert wird.

Schlussfolgerung

Sinnvolle Benennung ist sowohl eine wichtige Konvention als auch eine Kunstform, die die Lesbarkeit und Wartbarkeit Ihres Codes maßgeblich beeinflusst.

Versuchen Sie, diesen grundlegenden Prinzipien zu folgen:

• Verwenden Sie aussagekräftige, prägnante Namen.

• Befolgen Sie konsistente Konventionen wie BEM für Klassennamen und camelCase für Variablen und Funktionen.

• Verwenden Sie Präfixe, um Kontext und Klarheit hinzuzufügen.

Diese und die anderen hier besprochenen Tipps machen Ihren Code zu einer Freude, ob Sie ihn Monate später erneut überarbeiten oder mit einem Team zusammenarbeiten. Fangen Sie noch heute an, diese Tipps anzuwenden, und beobachten Sie, wie die Qualität Ihres Codes steigt.