A Short Guide to Component Naming

by Vuk Dukic, Senior Software Engineer

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.

More articles

Ethical Considerations in AI Development

In the realm of artificial intelligence (AI), the pace of innovation has far outstripped the development of ethical guidelines and frameworks. As AI systems become increasingly integral to our daily lives, from personal assistants to decision-making algorithms, the imperative to address ethical considerations in AI development has never been more pressing. This blog post explores the multifaceted ethical landscape of AI development, underscored by a poignant use case that brings to light the complex interplay of ethics, technology, and human values

Read more

Transforming Professional Presence with Anablock's Headshots: A Game-Changer for Personal Branding

In an era where digital presence is synonymous with professional identity, Anablock's Headshots emerges as a revolutionary tool designed to elevate individual branding through high-definition, AI-generated professional headshots. This application caters to a broad spectrum of users, from job seekers to corporate executives, offering them a seamless pathway to enhancing their online profiles across platforms like LinkedIn, company websites, and professional portfolios

Read more

Tell us about your project

Our offices

  • San Francisco
    353 Sacramento Street
    San Francisco, CA 94111
  • Walnut Creek
    2121 N California Blvd
    Walnut Creek, CA 94596