4 min read

How to write clean code

Almost every profession has challenges that sometimes require repeating tasks initiated by others. The main reason for this is that everyone works differently, and some habits can become ingrained unintentionally.

When it comes to programming, ensuring your code is clean and well-structured makes it more maintainable and readable. Here are some key considerations and guidelines to keep in mind.

This article does not aim to be an exhaustive list of rules that must always be followed. Instead, it is based on personal experience with various projects of different complexities, and I would recommend adhering to these principles.

1. Plan the logic before writing code

Before blindly typing code into your editor, create flowcharts, application maps, or pseudocode. This will help you verify the logic, clarify complex functionality, and identify weak points in the code, ultimately saving you time. Most importantly, it will prevent unnecessary code replacements and additions that could disrupt development.

2. Page structure

Working with a main container is convenient, but it’s even better to use containers with unique IDs. This is useful when manipulating the DOM. Consider the following example:

<div id="main-container">
    <div id="header">
        <div id="logo">...</div>
        <div id="main-menu">...</div>
    </div>
    <div id="content">
        <div id="left-column">...</div>
        <div id="center-column">...</div>
        <div id="right-column">...</div>
    </div>
    <div id="footer">
        <div id="footer-menu">...</div>
    </div>
</div>

This structure is highly readable due to the div elements, each of which has a name associated with its content. This approach makes it easier to add and modify code, both for you and for others who may work on it in the future. While this method is simple, it can provide significant benefits over time.

3. Use proper indentation

Many developers have encountered poorly formatted code that becomes a nightmare to work with. Incorrectly placed indentation makes code difficult to read and maintain. Well-structured code is easier to support and clearly indicates where sections start and end.

4. Writing comments

Many developers underestimate the importance of writing comments in their source code. However, comments serve as real-time documentation, providing clarity during the development process without disrupting workflow.

While I personally prefer writing comments in English, they can be written in any language or transliteration. Comments should explain the code concisely but should not be overused.

5. Avoid overusing comments

Comments should be informative, concise, and to the point. Use comments to describe functionality, variables, and expected outcomes, but avoid unnecessary explanations such as:

  • Explaining things to yourself (/* I’ll finish this later... */)
  • Shifting responsibility (/* Eugene wrote this section. Ask him. */)
  • Providing vague descriptions (/* This is another math function. */)
  • Retaining outdated code fragments (/* Old function, keeping just in case */)

Over time, excessive or redundant comments can make your code confusing, so it’s best to keep them clean and relevant.

6. Avoid large functions

As applications grow in complexity, their functions and methods tend to expand. Functions with hundreds of lines of code become difficult to maintain and understand.

A best practice is to break large functions into smaller ones. Many procedures can be reused in multiple places, improving readability and maintainability.

7. Use meaningful function and variable names

When creating variables or functions, their names should clearly indicate their purpose. Avoid using vague or non-descriptive names, as they can make code harder to understand, especially when revisiting it later.

8. Avoid mixing programming languages

With CSS and JavaScript, it’s common to encounter scripts containing elements from both languages within HTML. Mixing different languages in one file can cause confusion and unnecessary complexity.

I always store styles in separate CSS files and JavaScript logic in its own files. Even HTML views are often separated from business logic using template patterns like MVC.

Conclusion

What is convenient may not always be beneficial to the development process. To improve efficiency, it’s important to keep your code clean and structured for easier maintenance. Since multiple developers may work on a project over time, writing open and understandable code ensures better collaboration and professionalism.