Question

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

Answer 1

代码重构是重构现有计算机代码的过程 - 改变因子 - 而不改变其外部行为。

从此链接here

获取

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

不是为每个元素添加颜色：红色，而是

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

下面的代码段

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

＆＃34;整理＆＃34;，以及切换到预处理的理想机会

基本上我会把重构视为＆＃34;整理＆＃34;。就个人而言，如果我要进行这个过程，我会考虑通过现有的CSS工作，并且＃34;重构＆＃34;它成为一种预处理语言，如LESS或SASS。它肯定会削减行数（预渲染）并带有老板想要的各种其他奖金：）

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

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

评论，缩进和分段代码

很好地评论代码部分被视为重构过程的一部分，并且会热情地欢迎可能跟随你的同事和编码人员。切换到CSS预处理器的另一个好处是，你可以慷慨地评论，编码缩进，切片等等，当代码编译成（通常缩小的）CSS时，所有额外的东西都会被剥夺。生产

可能有用的工具

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

我如何重构css？

2 个答案: