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.