Do you write clean and reusable code?

Reusable code has been a talk web developers have had for years now, and it is not only because it's hype. Reusable code is actually shortening your overall code, speeding up your website, and also saving the environment from unnecessary pollution.

What is reusable and clean code?

In short: reusable code is when you write code that you can reuse in multiple places on your website instead of only one. The long answer: Code can be written in many ways and for many web developers that involves writing code that can only be used for a single element on a website, instead of writing code that could be used in several places. It comes in many shapes since reusable code could be made with almost every type of code available today.

If you think of a general CTA (Call to action) button on a website. The button could be used as a standalone button or maybe inside an element such as a list of cards. If you weren't writing reusable CSS for example, then you would have to style the same button over and over again both as a standalone and inside lists and other stuff. As you can imagine, once you are done with the whole website, the same code will be seen again and again in your style sheet. Had you instead written all the styling in a general class that could be used both as a standalone and in elements, then the button styling would only have been used once. So when we write reusable code it means that we can reuse the same elements or sections in other places instead of only one.

Why is reusable code good?

Reusable code has many advantages both for you the developer, your colleagues, future development, and of course the environment. Even though it might feel like it takes longer to write reusable code, it saves you a lot in the end. Underneath you will find a list of some of the pros there is to writing reusable code:

Faster coding: When writing reusable code you are allowing yourself to write faster code. Reusing elements instead of inventing the deep plate each time you need an element on your website will save you tons of time.
Simpler code structure: If you only need to look one place in your style sheets or components to find the code to an element, then you will have a much simpler code structure than if you had to look through hundreds of places before you found the right element.
Changes are faster: Let's say your client wants to change the overall color of your CTA (Call to action) button. If you had to adjust the color in multiple places it would take much longer than changing it in one place.
Faster loading and interaction in the browser: Reusable code tends to give you faster loading and interaction times in the web browser. The reason your this is a much smaller overall project weight in either KB, MB, or GB.
Less pollution: When you write reusable code your overall bundle size is going to be smaller and therefore there will be less code that your visitor's web browser has to interpret and process. This means your own device and others work less to display and interact with your website and therefore use less energy.

Where can I write reusable code?

Reusable code can be written in almost every existing programming language and no matter which language you choose it will give you the same benefits. So no matter if you are writing a web application in React, Svelte, Angular, CSHTML, HTML, or maybe Vue, then you will be able to use reusable components and code.

Across programming languages, you can write reusable differently. In React, Svelte, Angular, and Vue you can create components that can be reused over and over on your website or web application. In JavaScript, you can write functions that work with multiple elements instead of only a single element. In CSS you can write classes that cover general elements instead of styling elements over and over every time you need them.

How do I start using reusable code in my project?

The first step towards creating reusable elements is to make the decision, obviously. After that, you can sit down and analyze your website to find elements that are being used over and over again. Things you could look for could be buttons, headlines, paragraphs, lists, and images since they are some of the most common to use.

Once you know which elements could be reusable, then you can start changing them one by one. If you for example start with the most general button, then you can write the styles to a class in your styles sheet and then add the class to all the places you find that specific button. Now you go through all the places in your CSS that you have mentioned this specific button and comment out that code to see if your button still looks good. If it looks good, then you can remove the code that you have commented out. Depending on the size of your project, then alone a button could save you hundreds of lines of CSS.

The process is the same when you are trying to turn React, Svelte, Angular, or Vue elements into reusable components. First, locate the element and then make it into a separate component that you can import into the places you need it. Adjust the props to allow you to change the click function and text just to make reusing the component even easier for you.

Wrapping up

As you can see, reusing components is not only better for the environment, but also simplifies your code structure and makes changes much faster and easy. It makes you a faster developer and makes it easier for you to have an overlook over your project even when it is expanding.

We would love to hear how you have made reusable components below in our comment section. Share your experience and ideas to help others and if you have questions please feel free to add those as well. We hope that you have gotten some ideas from this article, and we would like to encourage you to share this article with your friends, colleagues, family, and community. Only together can we make the internet more sustainable.

Author

Michael Andersen

I am a self-taught and highly passionate web developer currently living in Sweden, where I use my skills to make the internet a better place through ethical and sustainable web design.