如何重构 css?

Question

我的任务是重构网站的css，我对重构过程很陌生。为了重构我的网站的css，我可以经历什么确切的过程？我可以使用哪些工具来简化此过程？

Answer 1

代码重构是在不更改其外部行为的情况下重组现有计算机代码的过程 - 更改分解。

从这里获取此链接

一种方法是尽量避免为每个具有相同属性的 html 元素编写重复的代码

示例 查看样式 三个div 每个都有相同的规则

#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>

与其为每个元素添加颜色：红色，我们可以这样做

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

下面的代码片段

#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

">

整理"，是切换到预处理的理想机会

基本上，我认为重构是"整理"。就我个人而言，如果我要进行这个过程，我会考虑通过现有的CSS工作，并将其"重构"为预处理语言，如LESS或SASS。它肯定会减少行数(预渲染)，并带有老板想要:)的各种其他奖励

特别是消除冗余或重复的规则

重构过程的一个主要部分是消除冗余或重复的规则。针对不存在的元素的规则(这些元素通常会随着时间的推移而增长)或意外复制的规则。

注释、缩进和分段代码

很好地注释代码部分被视为重构过程的一部分，并且可能会受到可能跟随您的同事和编码人员的热情欢迎。切换到CSS预处理器的另一个好处是，您可以慷慨地进行注释，编码缩进，分段等，当代码编译为生产中使用的(通常是缩小的)CSS时，所有这些额外的东西都会被剥离。

可能有帮助的工具

像 https://unused-css.com/这样的工具声称可以识别/删除未使用的CSS规则，但我没有使用它们的经验，无论如何我宁愿手动完成任务。