css 重构_如何重构CSS –指南

最新推荐文章于 2021-05-21 16:01:36 发布

cune1359

最新推荐文章于 2021-05-21 16:01:36 发布

阅读量456

点赞数

文章标签： python java vue css 人工智能 ViewUI

本文介绍了CSS重构的重要性，旨在提高代码可读性和可重用性，避免CSS爆炸。通过初步审核、制定计划、追踪进度、遵循编码风格指南、设置一致的文件结构、删除未使用和重复规则、降低选择器特异性、消除行内样式、清理幻数和硬编码值、重构单位和值等步骤，实现有效的CSS重构。建议使用工具如CSSDig辅助审核，遵循如SMACSS或ITCSS的文件结构体系，并坚持编码风格指南，确保代码整洁且易于维护。

摘要由CSDN通过智能技术生成

如果我们要拥有一个可管理和优化的代码库，那么CSS重构就必须成为前端开发工作流程的重要组成部分。重构CSS时，我们会清理并重新组织现有代码，而无需添加任何新功能或修复错误。

重构有助于防止CSS爆炸，提高代码的可读性和可重用性 ， 并使CSS更时尚，更快速地执行 。

重构通常是需要一段时间的，因为即使项目以简洁而有组织的代码库开始，迟早也会变得不清楚。一致性，过时的规则和重复的代码部分出现；而且我们也开始改写样式，并采用越来越多的技巧和解决方法。

保持我们CSS代码库可维护性的最佳方法是坚持“ 尽早重构，经常重构 ”的经验法则。在本文中，我们将介绍一些有关如何进行有效CSS重构过程的提示。

1.进行初步审核

为了更好地了解我们需要重构的内容，最好从全面审核开始，以了解我们目前拥有什么 。

有许多出色的在线工具可以帮助我们实现这一目标。 CSSDig是功能强大的Chrome扩展程序，可以分析网站CSS，并探索其弱点，例如选择器过于具体或重复属性。

在初次审核期间手动检查代码也很重要，因为只有通过这种方式才能发现架构上的许多问题。

2.制定可管理的计划

重构工作代码始终是一项艰巨的任务，但是，如果我们针对需要做的事情制定计划，将重构过程切成可管理的块，并制定可行的时间表，则可以减轻痛苦。

在CSS重构中，我们始终需要考虑一个至关重要的事情：我们重构的某些事情（例如更改选择器名称）也将有必要调整相关HTML和JavaScript文件的代码 。

因此，最好追溯我们需要执行的这些其他修改 ，并将它们与与CSS相关的主要任务一起放入我们的重构计划中 。

3.追踪进度

在开始重构之前，这是备份我们的初始文件的重要步骤。在我们的工作流程中引入版本控制系统（例如Git或Subversion）还可以显着改善重构过程，因为我们将拥有关于已执行的顺序步骤的注册表，并且我们可以返回上一个阶段如果我们要重做事情 。

4.坚持编码风格指南

一致的编码样式指南可以显着提高代码的可读性和可维护性，因此在开始重构之前，必须先设置CSS编码样式指南 。

要决定的重要事情是：

命名约定
格式化规则
申报单
我们要使用的单位和值
评论规则

如果我们不想创建自己的编码风格指南，也可以使用其他人的指南，例如可以在Github上找到的ThinkUp指南。

尽管仅介绍编码风格指南还不够，我们在重构期间重写代码时还需要坚持下去 ，并期望与项目中其他所有人一样 。

5.设置一致的文件结构

在准备就绪之后，我们要做的第一件事就是建立一个适当CSS文件结构，该结构注意CSS的级联性质。

这主要取决于项目如何最好地组织文件，但是有一些通用规则，例如对CSS重置样式使用单独的normalize.css文件，对于在整个项目中使用的全局样式使用单独的global.css ，并将第3方库存储在单独的文件夹中。

如果我们想安全地使用CSS文件结构，还可以使用现成的体系结构，例如SMACSS或ITCSS ，它们提供了有关如何以可伸缩方式组织CSS文件的有效技术。

6.摆脱未使用和重复的规则

一段时间后，CSS文件通常开始包含大量未使用的规则，我们需要在重构过程中识别并清除这些规则。有许多在线工具可让我们研究这些过时的规则 ，有时还使我们能够快速抛弃它们。

为此目的，最著名的工具可能是UnCSS ，它是一个Node.js模块，可以快速清除未使用CSS规则，它还为我们提供了复杂的配置选项，可以轻松地对清理过程进行微调。。

重要的是要考虑到我们不一定要从我们拥有的所有 CSS文件中删除未使用的规则 ，例如从全局，重置或第三者样式表中删除，因此我们在执行清理时需要排除它们 。

除了过时的规则外，重复的规则还会导致多余的代码膨胀和性能损失。我们可以使用CSS Purge Node.js模块将其删除，但是我们也可以使用CSS linter，以便在CSS文件中搜索重复的规则 。

7.降低特异性

CSS选择器的特异性是根据其包含的内部选择器的数量和类型来计算的。 CSS特异性表示为4位数字，如果我们查看此可视CSS特异性计算器，这是最容易理解的数字：

最低的特异性（ 0001 ）属于仅针对一个常规HTML元素（例如<h1>或<li> 。 复合选择器包含的内部选择器越多，其特异性就越高。

某些选择器（例如id或来自内联样式的选择器）具有更高的优先级，因为它们会覆盖属于更多通用选择器的样式。例如， #id1选择器的特异性为0100 。

在重构中，目标是尽可能降低选择器的特异性（使它们保持较短），因为具有更高特异性的选择器会大大降低选择器的可重用性 ，并导致代码库过大 。

高特异性选择器的3种主要类型是：

合格的选择器 ，例如p.class1 （此处无需定义p标签，因为它使得无法将同一类与其他HTML元素一起使用）
深度嵌套的选择器 ，例如.class1 .class2 .class3 .class4 ...
ID ，例如#id1

在线工具（如第1步中提到的CSSDig）可用于快速找到这些高特异性选择器。在编码样式指南中设置有关最大嵌套级别或使用id选择器的限制之类的规则也很有用。

8.淘汰

CSS规则后跟!important语句会覆盖常规样式规则。 !important规则迟早使用会导致代码不一致 。大多数棉绒工具将它们标记为错误不是巧合。

当我们需要快速编写CSS时，由于它们的简单性，我们可能会开始依赖它们。

9.清除幻数和硬编码值

在我们日常CSS工作流程中，有时我们遇到无法解决的问题，并且我们开始使用所谓的幻数（ Magic Number） ，这些值由于某些原因而起作用，但我们不知道为什么。例如，以以下示例为例：

.class1 {
	position: absolute;
	top: 28px;
	left: 15.5%;
}

幻数的主要问题在于它们是间接的 ，并且体现了“通过置换编程”反模式。在重构过程中，我们需要从代码中删除这些任意规则，并在可能的情况下用更合理的解决方案替换它们。

同样的经验法则也适用于硬编码的值 。可能在行高规则中找到最常出现的硬编码值：

/* bad, we'll need to add extra fixed line-height rules 
 to the child elements of .class1 */

.class1 {
	font-size: 20px;
	line-height: 24px;
}

/* good, the flexible line-height rule can be safely 
used by child elements as well */

.class1 {
	font-size: 20px;
	line height: 1.2;
}

硬编码的值使我们的代码不太适合未来使用，并且更加僵化，因此，作为重构的一部分，我们需要对其进行挖掘，并用灵活的值替换它们 。