A Short Guide to Component Naming

by 최신범, 풀스택 개발 / 대표

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

The Future of Web Development: Our Predictions

From the rise of blockchain and AI, to the return of the desktop, we share our predictions for the future of web development.

Read more

3 Lessons We Learned Going Back to the Office

Earlier this year we made the bold decision to make everyone come back to the office full-time after two years working from a dressing table in the corner of their bedroom.

Read more

프로젝트를 함께 시작하세요

작은 아이디어부터 복잡한 시스템까지, DataSketchers와 함께라면 데이터로 의미 있는 가치를 만들어낼 수 있습니다.

• 웹 개발 및 D-SKET 서비스 문의
• 워크플로우 자동화 컨설팅
• 데이터 분석 및 시각화 프로젝트
• 기술 지원 및 유지보수 서비스

빠른 연락처

전화
010-3800-3419
응답 시간
보통 24시간 내 답변

오피스 위치

  • 서울 본사
    서울시 동대문구 서울시립대로 160
    SI-Station#1 3층 305호