Web Development

A Short Guide to Component Naming

Naming components is critical for developers. Learn to be descriptive, clear, and creative with your code organization.

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.

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.

Written by

Chandru Ranganathan

WebCoder

WebCoder at FUEiNT. Writes on development fundamentals and on working life in an IT team.

All 3 articles by Chandru Ranganathan
Next stepWeb Development

Want this done on your own site?

Tell us what you are trying to do in two sentences. You will get a straight answer, and if it is not work for us we will say so.

Back to the blog
ServiceWhat FUEiNT buildsWebsites, applications and AI work, built by a studio in Coimbatore since 2014.Open

Bring us the one everyone called impossible.

Messy, undocumented, half-migrated and business-critical is our favourite kind of brief. Write two sentences. You will get a straight answer and a way forward.

WhatsAppMessage us on WhatsApp
Visit12, Sri Vigneshwara Nagar, Amman Kovil
Saravanampatti, Coimbatore, TN, India — 641035

தெய்வத்தான் ஆகா தெனினும் முயற்சிதன்மெய்வருத்தக் கூலி தரும்.