Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Top 18 Best Practices for Writing Super Readable Code

by
Difficulty:IntermediateLength:LongLanguages:

Code readability is fundamental for development—it is key to maintainability and working together with a team. This article will detail the 18 most important best practices when writing readable code. 

1. Commenting & Documentation

IDEs (Integrated Development Environments) and code editors have come a long way in the past few years. This has made commenting your code more useful than ever. Following certain standards in your comments allows IDEs and other tools to utilize them in different ways.

Consider this example:

VSCode User CommentsVSCode User CommentsVSCode User Comments

The comments I added to the function definition can be previewed whenever I use that function, even from other files.

Here is another example where I call a function from a third-party library:

VSCode 3rd Party documentation VSCode 3rd Party documentation VSCode 3rd Party documentation

In these particular examples, the type of commenting (or documentation) used is based on PHPDoc, and the IDE is Visual Studio Code.

2. Consistent Indentation

I assume you already know that you should indent your code. However, it's also worth noting that it is a good idea to keep your indentation style consistent.

There's more than one way of indenting code.

Style 1

Style 2

Style 3

I used to code in style 2 but recently switched to style 1. But that is only a matter of preference. There is no "best" style that everyone should be following. Actually, the best style is a consistent style. If you are part of a team or if you are contributing code to a project, you should follow the existing style that is being used in that project.

The indentation styles are not always completely distinct from one another. Sometimes, they mix different rules. For example, in PEAR Coding Standards, the opening bracket "{" goes on the same line as control structures, but they go to the next line after function definitions.

PEAR Style:

Also note that they are using four spaces instead of tabs for indentations.

On Wikipedia, you can see samples of different indent styles.

3. Avoid Obvious Comments

Commenting your code is fantastic; however, it can be overdone or just be plain redundant. Take this example:

When the text is that obvious, it's really not productive to repeat it within comments.

If you must comment on that code, you can simply combine it to a single line instead:

Comments should ideally explain why you were doing something the way you did it. If you have to write more than a one-line comment to explain what the code is doing, you should consider rewriting the code to be more readable.

4. Code Grouping

More often than not, certain tasks require a few lines of code. It is a good idea to keep these tasks within separate blocks of code, with some spaces between them.

Here is a simplified example:

Adding a comment at the beginning of each block of code also emphasizes the visual separation.

5. Consistent Naming Scheme

PHP itself is sometimes guilty of not following consistent naming schemes:

  • strpos() vs. str_split()
  • imagetypes() vs. image_type_to_extension()

First of all, the names should have word boundaries. There are two popular options:

  • camelCase: The first letter of each word is capitalized, except the first word, like parseRawImageData().
  • underscores: Underscores between words, like mysql_real_escape_string().

Having different options creates a situation similar to the indent styles, as I mentioned earlier. If an existing project follows a certain convention, you should go with that. Also, some language platforms tend to use a certain naming scheme. For instance, in Java, most code uses camelCase names, while in PHP, the majority of code uses underscores.

These can also be mixed. Some developers prefer to use underscores for procedural functions and class names, but use camelCase for class method names:

So again, there is no obvious "best" style. Just be consistent.

6. DRY Principle

DRY stands for Don't Repeat Yourself. Also known as DIE: Duplication is Evil.

The principle states:

"Every piece of knowledge must have a single, unambiguous, authoritative representation within a system." — Wikipedia

The purpose for most applications (or computers in general) is to automate repetitive tasks. This principle should be maintained in all code, even web applications. The same piece of code should not be repeated over and over again.

For example, most web applications consist of many pages. It's highly likely that these pages will contain common elements. Headers and footers are usually the best candidates for this. It's not a good idea to keep copying and pasting these headers and footers into every page. Instead, put that header and footer code in separate source files to be included wherever they are needed.

7. Avoid Deep Nesting

Too many levels of nesting can make code harder to read and follow.

For the sake of readability, it is usually possible to make changes to your code to reduce the level of nesting:

8. Limit Line Length

Our eyes are more comfortable when reading tall and narrow columns of text. This is precisely the reason why newspaper articles look like this:

columns of text in a newspaper columns of text in a newspaper columns of text in a newspaper

It is a good practice to avoid writing horizontally long lines of code.

Also, if anyone intends to read the code from a terminal window, such as Vim users, it is a good idea to limit the line length to around 80 characters.

9. File and Folder Organization

Technically, you could write an entire application's code within a single file. But that would be a nightmare to read and maintain.

During my first programming projects, I knew about the idea of creating "include files." However, I was not yet even remotely organized. I created an inc folder, with two files in it: db.php and functions.php. As the applications grew, the functions file also became huge and unmaintainable.

10. Consistent Temporary Names

Normally, the variables should be descriptive and contain one or more words. But this doesn't necessarily apply to temporary variables. They can be as short as a single character.

It is a good practice to use consistent names for your temporary variables that have the same kind of role. Here are a few examples that I tend to use in my code:

11. Capitalize SQL Special Words

Database interaction is a big part of most web applications. If you are writing raw SQL queries, it is a good idea to keep them readable as well.

Even though SQL special words and function names are case insensitive, it is common practice to capitalize them to distinguish them from your table and column names.

12. Separation of Code and Data

This is another principle that applies to almost all programming languages in all environments. In the case of web development, the "data" usually implies HTML output.

When PHP was first released many years ago, it was primarily seen as a template engine. It was common to have big HTML files with a few lines of PHP code in between. However, things have changed over the years, and websites have become more and more dynamic and functional. The code is now a huge part of web applications, and it is no longer a good practice to combine it with the HTML.

You can either apply the principle to your application by yourself, or you can use a third-party tool (template engines, frameworks, or CMSs) and follow their conventions.

13. Alternate Syntax Inside Templates

You may choose not to use a fancy template engine, and instead go with plain inline PHP in your template files. This does not necessarily violate the "Separation of Code and Data," as long as the inline code is directly related to the output and is readable. In this case, you should consider using the alternate syntax for control structures.

Here is an example:

This lets you avoid lots of curly braces. Also, the code looks and feels similar to the way HTML is structured and indented.

14. Object-Oriented vs. Procedural

Object-oriented programming can help you create well-structured code. But that does not mean you need to abandon procedural programming completely. Actually, creating a mix of both styles can be good.

Objects should be used for representing data, usually residing in a database.

Procedural functions may be used for specific tasks that can be performed independently.

15. Read Open-Source Code

Open-source projects are built with the input of many developers. These projects need to maintain a high level of code readability so that the team can work together as efficiently as possible. Therefore, it is a good idea to browse through the source code of these projects to observe what these developers are doing.

open source code exampleopen source code exampleopen source code example

16. Use Meaningful Names for Variables and Functions

You will save a lot of your precious time by using meaningful names for variables and functions. This may not seem like a big deal when you are just starting out and the programs you write are just a couple of dozen lines long. However, things get very confusing fairly quickly for code that has hundreds or thousands of lines.

Consider an example, where you have two variables $is_vaccine_available and $iva. In a large program, it won't be easy to guess what purpose $iva serves without looking through some relevant lines of code. On the other hand, you can guess that the variable $is_vaccine_available is almost certainly being used to store the status of vaccine availability.

Trying to save time by using very short names for variables and functions is counter-productive in the long run, especially when there are a lot of capable code editors and IDEs available to help you write code.

17. Avoid Using Magic Numbers

The concept of magic numbers in programming refers to the use of hard-coded numerical values in your code. Using such numbers might make sense to you while you are writing the code. However, you or someone else will most probably have a hard time figuring out what that number was supposed to do when they look at the same piece of code in future.

Considering the code above, in the first case, we have no idea what the 400 signifies. Is it the count of people who will be served eggs, or is it something else? On the other hand, we know very clearly in the second case that we are checking if our egg count is over the container capacity.

It is also easier to update the $container_capacity by changing its value in one place. This will not be possible when using magic numbers as you will have to go through the whole code.

18. Code Refactoring

When you "refactor," you make changes to the code without changing any of its functionality. You can think of it like a "cleanup," for the sake of improving readability and quality.

This doesn't include bug fixes or the addition of any new functionality. You might refactor code that you have written the day before, while it's still fresh in your head, so that it is more readable and reusable when you may potentially look at it two months from now. As the motto says: "refactor early, refactor often."

You may apply any of the "best practices" of code readability during the refactoring process.

Conclusions

I hope you enjoyed this article! Code readability is a huge topic, and it's well worth thinking more about, whether you work alone, with a team, or on a large open-source project.

This post has been updated with contributions from Monty Shokeen. Monty is a full-stack developer who also loves to write tutorials and to learn about new JavaScript libraries.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.