Refactoring HTML and CSS

How to improve your web projects by refactoring your code.

(Prefer to watch a video? This article is a companion piece to my Decoded by Christina series on YouTube.)

Refactoring is the process of rewriting and restructuring the code to improve the design of the code base. This practice can be applied to any language but this article will focus on HTML and CSS. When refactoring, here are some goals to keep in mind:

Rewrite to reduce complexity. It’s easy to fall into the trap of over-engineering, especially when you’ve just learn a cool new trick. But try to keep in mind to only add what you need.

Make it reusable. Being able to reuse snippets of code means less code overall and more consistency.

Think about how you can make it flexible. This can help to make it easier to reuse and extend features by adding onto existing code snippets

Make the code easy to read. Use whitespace, indentation and comments for organization. Show your intent by using descriptive class names and comments. Write your code as if you are writing it for someone else to understand. And in some cases you probably are! And even if you are only writing it for yourself…