How do I refactor css?

Question

I have been tasked with refactoring the css of a website, and I am quite new to refactoring process. What is the exact process I can undergo in order to refactor the css of my website? What are the tools I can use in order to ease this process?

Answer 1

Code refactoring is the process of restructuring existing computer code—changing the factoring—without changing its external behavior.

Take from this link here

One way is you try to avoid writting duplicated codes for each html elements that has the same properties

example Look at styling three divs each has same rule

#d1 {
  color: red;
  padding-left: 15px;
  background-color: green;
}

#d2 {
  color: red;
  background-color: blue;
  padding-left: 15px;
}

#d3 {
  padding-left: 15px;
  color: red;
  background-color: yellow;
}

<div id="d1">d1</div>
<div id="d2">d1</div>
<div id="d3">d3</div>

Instead of adding a color:red for each element, we can do

#d1,#d2,#d3 {
  color: red;
}

Snippet below

#d1 {
  background-color: green;
}
#d2 {
  background-color: blue;
}
#d3 {
  background-color: yellow;
}
#d1,#d2,#d3 {
  color: red;
}

<div id="d1">d1</div>
<div id="d2">d1</div>
<div id="d3">d3</div>

Answer 2

"Tidying up", and an ideal opportunity to switch to pre-processing

Basically I would think of refactoring as "tidying up". Personally if I were to undertake that process I would think about working my way through the existing CSS, and "refactoring" it into a pre-processing language like LESS or SASS. It would certainly cut down on the line count (pre-rendered) and carry all sorts of other bonuses that the bosses would like :)

Especially eliminating redundant or duplicated rules

A major part of the refactoring process would be the eliminating of redundant, or duplicated rules. Either rules targeting elements that don't exist (These grow over time usually) or rules that are accidentally duplicated.

Commenting, indenting and sectioning code

Commenting the code nicely part be seen as a part of the refactoring process, and would be greeted enthusiastically be co-workers and coders that might follow you. Another bonus of switching to a CSS pre-processor is that you can be generous with commenting, coding-indenting, sectioning etc and all that extra stuff will just get stripped away when the code compiles to the (usually minified) CSS that gets used in production.

Tools that might help

Tools like https://unused-css.com/ claim to identify/remove unused CSS rules, but I have no experience with them, and would rather do the task manually anyway.