Spent 6 months ignoring component naming conventions and it cost me 3 hours last Tuesday

Back when I first started building a design system at a startup in Austin, I thought I could just name my button variants whatever came to mind. Primary, main, cta-blue, action-button - it was a mess. Last Tuesday I had to update every single file because nothing was consistent, took me 3 hours just to track down the right components. Now I use a strict naming pattern based on function first, appearance second. Has anyone else had to redo their entire library because naming got out of hand?

2 comments

2 Comments

mila_jones3917h ago

Oh you mean naming things like 'button-finally-v3-final' and then wondering why nobody can find it? Yeah done that. Took me a whole Saturday to rename everything after I spent 20 minutes digging for a toggle component I swore was called 'switch-thingy'. Now I just use function-first names like 'form-submit' and 'nav-link' and it saves me at least one existential crisis per week. The weird thing is how much time naming actually saves you once you stop treating it like an afterthought. But honestly I still have a folder called 'old-trash' that I refuse to clean out just out of spite.

felix_martin567h ago

Oh man, "old-trash" is basically my sacred archive at this point. I've got a folder called "zzz_test_stuff_ignore" that I keep telling myself I'll delete once I'm sure nothing in it is important. Spoiler: it's been three years. The naming system you landed on reminds me of when I tried naming everything by color code like "blue-button-urgent" and then my coworker asked me what happens when you change the color. I had nothing. Now I just throw "temp" or "holdplease" at the end of anything I'm unsure about. It's a mess but it's my mess.