7 min read

Design , UX , UI

A practical guide to naming UI components, with useful resources, naming conventions, and structures. You’ll find more useful guides and online workshops here on Smashing Magazine, so make sure to browse and explore.

Naming is hard. The language we use shapes the way we think about things, but also the conversation we have about it. That’s why we have so much confusion about colors, icons, UI components, features — and that’s why we struggle to name design tokens, HTML classes, and variables.

Sometimes, the names we choose are too generic , so it’s difficult to understand what exactly is meant. And sometimes they are too specific , leaving little room for flexibility and reuse. How do we choose the right names? And which naming conventions work best?…