A Short Guide to Component Naming

web developmentfundamentalsbest practices
Video Thumbnail

1. Brevity is Key

Time is scarce, don’t waste it typing out long, descriptive component names. One approach is to give them short, cryptic names that only you will understand.

Need a button? Call it "btn". A modal? How about "md"? You’ll save precious minutes per day and you’ll get the added benefit of being the only person in the codebase who knows where anything is. This is called job security.

2. Rank High in Search

When working in large repos with lots of collaborators, it’s important that your component ranks high when people search for anything.

One way to stand out is to include all the possible search terms in your component name. Instead of “SignInButton” you might want call it “SignInButtonAuthenticationCookieUserLogIn” which will ensure that it is returned in almost any related search result.

3. Mix Languages

If you work remotely, it’s likely you are on a global team and yet all your components have English names. This slows down your non-english colleagues considerably so you should allow them to use their native tongue when naming components.

You can create an index file that maps all the different languages within your repo. Need a dropdown? Look for “Desplegable”. A form? Search “Форма”. You’ll learn multiple new languages while being more inclusive to your colleagues.

Chandru Ranganathan

Chandru Ranganathan

WebCoder

Chandru Ranganathan is a WebCoder at FUEiNT, contributing expert insights on technology, development, and digital strategy.

Related Articles

More insights on web development and related topics.

Serverless with AWS Lambda: Pros, Cons, and Pitfalls

Explore the world of serverless computing with AWS Lambda. Understand the benefits, challenges, and architectural pitfalls to avoid when building scalable cloud applications.

Read more

What is a VPC? AWS Networking Explained Simply

Demystify AWS networking. Learn how Virtual Private Clouds (VPC) work, the difference between public and private subnets, and how to secure your cloud real estate.

Read more

Connect with Us

Got questions or need help with your project? Fill out the form, and our team will get back to you soon. We’re here for inquiries, collaborations, or anything else you need.

Address
12, Sri Vigneshwara Nagar, Amman Kovil
Saravanampatti, coimbatore, TN, India - 641035