Namngivningskonventioner för tokens
Strukturera tokennamn hierarkiskt med globala namn, aliasnamn och namnnivåer specifika för komponenter.
Namngivningskonventioner för tokens är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Varför namngivning är viktigt
Inkonsekventa tokennamn gör det omöjligt att förutsäga vad en token gör utan att läsa dess värde. En tydlig och förutsägbar namngivningskonvention är grundläggande för ett tokensystem som kan skalas.
Mönstret kategori-egenskap-variant
Ett vanligt mönster är: [category]-[property]-[variant]. Exempel: color-text-primary, color-text-secondary, spacing-inset-sm. Varje segment preciserar betydelsen stegvis.
Semantiska namn jämfört med palettnamn
Undvik palettnamn som blue-500 i komponenter. Använd semantiska namn: color-action-default, color-feedback-error. Semantiska namn klarar ändringar av varumärkesfärger utan att komponenterna behöver uppdateras.
Tillståndsmodifierare
Lägg till tillståndet sist: color-button-bg-default, color-button-bg-hover, color-button-bg-disabled. Konsekventa suffix för tillstånd gör tokenuppsättningar förutsägbara och kompletta.
Skalnamngivning
Använd t-shirt-storlekar (xs, sm, md, lg, xl) eller numeriska skalor (100, 200...900) konsekvent. Numeriska skalor gör det möjligt att lägga till mellanliggande värden, medan t-shirt-storlekar är mer lättbegripliga för små uppsättningar.
Namespace-prefix
För system med flera varumärken eller produkter förses tokens med ett namespace-prefix: brand-a-color-primary jämfört med brand-b-color-primary. Namespaces förhindrar krockar när tokenuppsättningar slås samman.
Utdata för CSS-variabler
Kebab-case översätts direkt till CSS custom properties: color-text-primary blir --color-text-primary. Camel-case-tokens behöver omvandlas, medan kebab-case-tokens inte behöver det.
Dokumentation som del av namngivningen
Bra namn dokumenterar sig själva: spacing-stack-md (vertikalt avstånd mellan staplade element, medel) förmedlar avsikten utan en kommentar. Dåliga namn som s3 kräver extern dokumentation för att kunna förstås.
Undvika brytande ändringar
När tokens väl används är namnbyten brytande ändringar. Använd alias för utfasning: behåll det gamla namnet men låt det referera till den nya token. Ge användarna en migreringsperiod innan utfasade tokens tas bort.
Kontroll med verktyg
Linta tokennamn med anpassade regler i Style Dictionary eller ett CI-skript. Avvisa tokens som inte följer namngivningsmönstret. Automatiserad kontroll förhindrar att namngivningen gradvis avviker när systemet växer.
Samsyn i teamet
Publicera en namngivningsguide med exempel på korrekta och felaktiga namn. Håll en kort workshop så att design- och utvecklingsteamen enas om konventionerna innan systemet skalas upp. Konsekvens kräver gemensam förståelse, inte bara dokumentation.
Kunskapskontroll
Varför bör komponenttokens använda semantiska namn i stället för palettnamn som "blue-500"?
Sammanfattning
En konsekvent namngivningskonvention för tokens, med mönster av typen kategori-egenskap-variant, semantiska namn, tillståndssuffix och namnrymdsprefix, gör tokensystem förutsägbara, självbeskrivande och motståndskraftiga mot varumärkesändringar utan att komponentkoden går sönder.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”Namngivningskonventioner för tokens” gratis?
Ja – hela texten till ”Namngivningskonventioner för tokens” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Namngivningskonventioner för tokens”?
Strukturera tokennamn hierarkiskt med globala namn, aliasnamn och namnnivåer specifika för komponenter. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Namngivningskonventioner för tokens”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Vad är designtokens
- Namngivningskonventioner för tokens
- Implementera tematisering för flera varumärken med CSS-variabler
- Tokenverktyg: Style Dictionary