When naming your (Vue.js) components, you might sometimes be worried that the names are getting very long. In this article, we take a closer look at how long is too long and what are the most important best practices when it comes to naming your components. What is too long? Jane Manchun Wong from Facebook has gathered . data from more than 3000 components in the Facebook React codebase Her results are that the mean length of a component name is 27 characters: . And the longest component name counts She also gives two examples for some very long component names. ImA27CharacterComponentName 66 characters. CometSearchTypeaheadInternalLayoutInlineStrategyWithScrollableView CoronavirusCommunityHelpCometRequestOfferHelpCreateDialog On the one hand, we should always strive to keep our code short and concise. On the other hand, we read more code than we write. Therefore, it is critical to quickly understand what a component does rather than to save a few milliseconds while writing the code. That is why I argue that you should It’s more important to stick to some general rules and best practices when choosing the names for your components. worry much less about your component names getting too long and instead focus on getting them right. Best practices The official Vue.js style guide provides us with a comprehensive list of recommendations for how to name our Vue.js components. You might notice that even in the examples, some of the component names are getting quite long. Base component names Single instance component names Tightly coupled component names Order of words in component names Full-word component names Wrapping it up Instead, focus on coming up with descriptive names and rigorously follow the best practices I mentioned above. In the long run, it pays off. Don’t worry about your component names becoming too long! Previously published at https://markus.oberlehner.net/blog/are-my-component-names-too-long-vuejs-component-naming-best-practices/
