Naming Convention for Clean Code

It's been a while since my last article, which was written on May 30, 2021. It seems like I've been a bit lazy, doesn't it? We all know that the IT market is currently facing challenges, but instead of dwelling on the negatives, it's crucial to stay proactive and use this time to enhance our skills for the future.

I'm excited to be back with a new and valuable series on best coding practices, design patterns, and more. We'll embark on this learning journey together, and my hope is that this series will make coding more accessible and enjoyable for you.

Without further ado, let's dive into our first topic: "The Naming Conventions for Clean Code."

What is the naming convention?

Before we go over the different naming conventions, we need to understand what naming conventions are, and why they are important when working on a project.

In computer programming, a naming convention is a set of rules for choosing the character sequence to be used for identifiers that denote variables, types, functions, and other entities in source code and documentation. (source:Wikipedia)

Why is it necessary to apply a naming convention for code?

Naming files, folders, and variables is one of the simplest tasks developers perform daily. Despite its apparent simplicity, it stands out as one of the most crucial aspects for ensuring code clarity, maintainability, and ease of collaboration.

How do we apply the naming convention for code?

Below are the types of naming conventions that apply to the specific coding case:

• CamelCase

  1. Object Naming

      {
          firstName: "",
          lastName: "",
      }
     

  2. Hook naming

      useFlickitySlider(){};
      useClickOuside(){};
     

  3. Function Naming

      handleSubmit(){};
      handleClick(){};
     

• PascalCase

  1. File Naming

      ProductDetails.tsx
      Logout.tsx
     

  2. Folder Naming

      CheckoutSteps/
      ColourAtlasPanel/
      UserProfile/
     

• snake_case

  1. Database Schema Naming

      first_name
      last_name
     

• UPPER_CASE_SNAKE_CASE

  1. Constants

      const POPULAR_PRODUCT_IDS = [];
      const POPULAR_COLOUR_IDS = [];
     

  2. Environment Variables

      RECAPTCHA_SITE_KEY = "";
      HUBSPOT_API_KEY = "";
     

• kebab-case

  1. CSS Class Naming

      .btn-primary
      .btn-secondary
     

     Note: To write cleaner CSS we should apply the BEM methodology(details about BEM refer to https://israelmitolu.hashnode.dev/writing-cleaner-css-using-bem-methodology?ref=dailydev)

  2. kebab-case for folder naming

     That depends on your project convention. You could choose between kebab-case and PascalCase

• Configuration files

  Configuration file names should indicate their purpose and the environment they’re used in.

    uat.config.ts
    dev.config.ts
  

Conclusion

Choosing a correct naming convention and following it properly can make your life, and the life of your coworkers much easier.

Now it's time, to pick the naming convention you like, and use it consistently in your projects.

References

https://peacockindia.mintlify.app/docs/programming-case-types

https://israelmitolu.hashnode.dev/writing-cleaner-css-using-bem-methodology?ref=dailydev