A Short Guide to Component Naming in Webcuits
by Abhinav Choudhary, Webcuits Design System Lead
1. Brevity is Key
When building Webcuits components, we take a unique approach to naming. Instead of verbose component names, we opt for short, memorable identifiers that our team has grown to love.
Need a Webcuits button? We call it "Wbtn". A modal? That's "Wmd". Our prefix-based system ensures quick identification of Webcuits components while maintaining brevity. It's not about obscurity – it's about efficiency in our design system.
2. Rank High in Search
Working with the Webcuits component library means dealing with hundreds of components. Making them discoverable is crucial for our team's efficiency.
We've developed a search-optimized naming pattern: "W" prefix + component type + variant. For example, "WButtonPrimaryAuth" helps developers quickly find our primary authentication button in the component library. This systematic approach ensures components are easily discoverable while maintaining our naming hierarchy.
3. Mix Design Languages
Webcuits serves a global community of developers, and our component names reflect that. We embrace the diversity of design systems that inspire us, from Material Design to Apple's Human Interface Guidelines.
Our component naming convention includes references to these design languages. Need a Material-style dropdown? Look for "WDropdownMaterial". Want an iOS-style form? Try "WFormIOS". This approach helps developers understand the design inspiration behind each component while maintaining consistency.
