30
Stop naming your components by their current position on the page
I keep seeing teams build design systems where they name things like 'HeaderButton' or 'SidebarCard' and it drives me crazy. At my last job we had a button that was called 'ProfileMenuButton' for 6 months until the design team moved the profile to a different part of the screen. Then we had to rename it across 40 files and update all the references. A button is a button no matter where it sits on the page. Name it by what it does like 'LogoutButton' or 'SaveButton' not where it lives on the screen. I learned this the hard way after we did a complete layout redesign and half our components had outdated location based names. Has anyone else dealt with renaming a whole batch of components because of this?
2 comments
Log in to join the discussion
Log In2 Comments
lee_barnes7015h ago
Oh man, this hits close to home! We had this whole set of components named after a "DashboardTable" and "ProfileSidebarList" and when the design team decided to swap the layout around for a mobile-first approach it was an absolute nightmare. I spent three full days just hunting through files and fixing imports (which is about as fun as watching paint dry). The worst part was when we realized one component was actually used in two different locations but only one of them got renamed, so we had this weird duplicate for a while that caused bugs we didn't catch until QA flagged them. It's like naming your dog "FrontPorch" and then moving houses - the dog is still the same pooch, you know?
4
grace92612h ago
Honestly @lee_barnes70, I gotta ask is it really that deep? lol. Like yeah renaming stuff is annoying but three full days of hunting through files sounds like a bigger problem with how the codebase was set up in the first place. Maybe I'm just lucky but I've never had a rename spiral into that much chaos, usually a quick find and replace does the trick and you're done. That dog analogy is funny though, ngl, but I feel like people overthink naming conventions sometimes when the real issue is just messy organization.
5