Edvinas Urbasius


Front-end developer. Interested in IT, history and economics. The life-long learner.


CSS Refactoring

Photo by Chris Ried on Unsplash

Just wanted to share a pro-tip about how to refactor CSS. So, my project consists of Bootstrap and my own custom classes. There is so much stuff there, that I feel overwhelmed sometimes. Refactoring helps because it cleans up the waste.

I started the cleanup process yesterday by analyzing the code and found multiple places where it duplicates.

At the beginning of the project, I made a lot of weird class names, for example, custom-form-border-no-radius or custom-control-no-border-radius. Looking back, it was a very stupid thing to do. It’s a chaos of random names!

However, the Bootstrap framework already has rounded-0 class, so I just used Ctrl + R, R command in Rider IDE (remember guys, I’m using Linux!) and renamed custom-form-border-no-radius to rounded-0 where it’s used. I did that in other places, where the border-radius needs to be removed. Why write a custom code, when you can use the already made code?

I like Ctrl + R, R, because it’s a powerful command. Targets all instances of a selected element, but be careful, with great power, comes great responsibility. You don’t want to mess up your files!

Another cleanup strategy is to remove inline styles and replace them with classes or use what Bootstrap provides.

I am also planning to split a huge file of CSS we are having right now to smaller files, so it’s a more modular approach. Different buttons get their own CSS file and so on.

Refactoring will take some time, but I am ready for it. With each new commit, our code gets better and better.

You'll only receive email when Edvinas Urbasius publishes a new post

More from Edvinas Urbasius: