PricingLoginStart free
Designsystemer og komponentbiblioteker · Lektion

Navngivningskonventioner for komponenter

Lær, hvordan tydelig og konsekvent navngivning af komponenter og deres props gør et komponentbibliotek nemt at finde, forudsigeligt og vedligeholde.

Lektion 4 af 413 trin

Navngivningskonventioner for komponenter er en gratis Designsystemer og komponentbiblioteker-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Designsystemer og komponentbiblioteker, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Designsystemer og komponentbiblioteker-kurset indeholder 4 lektioner i alt.

Hvorfor navne er vigtige

De sværeste problemer i komponentbiblioteker er ikke tekniske – de handler om navngivning. En komponent med et dårligt navn er svær at finde, nem at bruge forkert og besværlig at omdøbe senere.

Gode navne fungerer som dokumentation og reducerer antallet af spørgsmål fra teammedlemmer.

Vær beskrivende, ikke smart

Navngiv komponenter efter, hvad de er, eller hvad de gør, ikke efter smarte metaforer.

  • Godt: UserAvatar, PrimaryButton
  • Undgå: Blob, Sparkle, Thingy

En ny kollega bør kunne gætte formålet ud fra navnet alene.

Konsekvent brug af store og små bogstaver

Vælg én regel for store og små bogstaver, og afvig aldrig fra den. Webkonventionen er:

  • Komponenter: PascalCase (CardHeader)
  • Props: camelCase (isDisabled)
  • CSS-klasser: kebab-case (card-header)

En blanding af forskellige skrivemåder svækker tilliden til biblioteket.

Booleske props

Booleske props er lettest at læse med præfikset is, has eller should. De lyder som spørgsmål og har som standard værdien false.

Uddraget nedenfor viser mønstret.

function describe(props) {
  return 'disabled=' + props.isDisabled + ', loading=' + props.isLoading;
}

console.log(describe({ isDisabled: true, isLoading: false }));

Mønstre for prop-navngivning

Fastlæg forudsigelige prop-navne på tværs af alle komponenter:

  • variant til visuel stil (primary, ghost)
  • size til størrelse (sm, md, lg)
  • onChange, onClick til hændelseshåndterere

Hvis alle komponenter bruger de samme navne, lærer du dem alle ved at lære ét sæt.

Undgå implementeringsdetaljer

Indbyg ikke skrøbelige detaljer i navne. BlueButton bliver en løgn, så snart brandfarven ændres.

Foretræk navne baseret på hensigt, f.eks. PrimaryButton. Hensigten er stabil, selv når udformningen udvikler sig.

Navnerum og præfikser

Mange systemer sætter præfikser på komponenter for at undgå navnekonflikter og vise deres oprindelse: DsButton, AcmeCard.

Det er nyttigt, når de apps, der bruger biblioteket, allerede har deres egne komponenter. Vælg et kort præfiks, og brug det overalt eller ingen steder – konsekvens er vigtigere end præference.

Navngivning af sammensatte komponenter

Relaterede dele bør dele et familienavn: Card, CardHeader, CardBody, CardFooter.

Det fælles præfiks grupperer dem i autofuldførelse og viser, at de hører sammen. Det er langt tydeligere end Card, Heading, Content.

Det er dyrt at omdøbe

Når et komponentnavn først er udgivet, er alle apps, der bruger det, afhængige af det. En omdøbning bliver en bagudkompatibilitetsbrydende ændring, der kræver afviklingsperioder.

Brug tid på navnet fra starten. En navngivningsdiskussion på 10 minutter sparer måneders besvær med migrering.

Dokumentér reglerne

Skriv jeres navngivningskonventioner ned i bidragsydervejledningen. Nye bidragydere bør ikke være nødt til at udlede jeres mønstre ved at undersøge koden.

En kort navngivningsvejledning, som håndhæves, holder biblioteket sammenhængende, efterhånden som flere bidrager.

Navne som kontrakt

I sidste ende udgør en komponents navn og prop-navne en offentlig API-kontrakt. Behandl dem med samme omhu som ethvert API.

Forudsigelige navne lader udviklere sammensætte jeres bibliotek med tillid uden at læse kildekoden.

Hurtigt tjek

Test din fornemmelse for god navngivning.

Besvar den i den interaktive lektion

Opsummering

Du har lært navngivningskonventioner, der gør et komponentbibliotek brugbart:

  • Vær beskrivende og basér navnene på hensigt, ikke på smart ordspil eller farver.
  • Brug konsekvent skrivemåde og forudsigelige prop-navne.
  • Gruppér sammensatte komponenter med fælles præfikser.
  • Dokumentér reglerne, og husk, at omdøbning er dyrt.

Gode navne er diskret dokumentation.

Gratis at komme i gang

Lær Designsystemer og komponentbiblioteker med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser
12
Lektioner
48
Start gratisSe hele kurset

Ofte stillede spørgsmål

Er lektionen “Navngivningskonventioner for komponenter” gratis?

Ja — hele teksten til “Navngivningskonventioner for komponenter” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Designsystemer og komponentbiblioteker-kurset, skal du opgradere til CoddyKit PRO. Designsystemer og komponentbiblioteker-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Navngivningskonventioner for komponenter”?

Lær, hvordan tydelig og konsekvent navngivning af komponenter og deres props gør et komponentbibliotek nemt at finde, forudsigeligt og vedligeholde. Du øver dig i Designsystemer og komponentbiblioteker med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Designsystemer og komponentbiblioteker?

Der kræves ingen tidligere erfaring. Designsystemer og komponentbiblioteker på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Navngivningskonventioner for komponenter”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Designsystemer og komponentbiblioteker-lektion?

Ja. Alle Designsystemer og komponentbiblioteker-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

  1. Atomic Design-metodikken
  2. Komponenters opbygning og struktur
  3. Valg af teknologistakkomponenter
  4. Navngivningskonventioner for komponenter
← Tilbage til Designsystemer og komponentbiblioteker