From the course: CSS: Refactoring Style Sheets

Why and when to refactor CSS - CSS Tutorial

From the course: CSS: Refactoring Style Sheets

Start my 1-month free trial

Why and when to refactor CSS

“

- [Instructor] Code refactoring is a fancy term for rewriting and restructuring existing code without changing its outcome. The purpose of refactoring is typically to improve code readability, reduce complexity, make the code more maintainable, update or upgrade the code to modern standards, and generally, just improve the code overall. Bottom line, anytime you grab an existing piece of code and do something with it, you are refactoring that code. And trust me, anytime you look at some old code you've written yourself or, even more so, some code you've inherited from someone else, you'll feel an immediate urge to refactor. The challenge is to make sure that refactoring is meaningful. Why should you refactor your CSS and when should you do it? Short answer, anytime you've written some CSS, you should refactor it, but, from a practical standpoint, it's a good idea to refactor CSS after you've written more than just a few rules. There's always room for improvement, and many improvements require some distance and context to take shape. Now for the long answer. Generally speaking, CSS can and should be refactored several times. First, when whatever the CSS supports is finished, and looking, and working the way it's supposed to we can call this the initial refactor. Here the purpose is to refine and literally clean up the working code to make it ready for production. Second, after publication, refactoring comes into play anytime you need to update the code, add a new feature, or perform and overall. Call this incremental refactors. The purpose here is to take the opportunity to improve and update older code. For incremental refactors, it's a good idea to focus on individual components and refactor the code in stages rather than all at once. Changing an existing feature refactor only the CSS directly applied and any related or inherited pieces. Adding a new feature, add the CSS in first then do a mini initial refactor to clean it up. Third, anytime code is inherited from someone else or reopened after a long time of dormancy, a full refactor is advisable. There are many reasons for this. First, you need to familiarize yourself with the code and structure it in a way that makes sense to you or your team. Second, the reason you're looking at the code is probably because existing features are being changed or new features are being added. In which case incremental refactors are in order. And third, there's a good chance coding standards have changed, new features are available, best practices have changed, tooling has improved, all of which warrant a full refactor. So, refactoring happened at all stages of the development and maintenance process and should be considered a core part of CSS development. When you feel like a code improvement is required, refactor away.

Contents