清理CSS代码库-css教程-PHP中文网

钥匙要点

固定覆盖错误

css很聪明，你应该太

>清理CSS代码库如何改善网站性能？

>可以清理CSS CodeBase Impact SEO？

首页

web前端

css教程

清理CSS代码库

Christopher Nolan

Feb 22, 2025 am 08:32 AM

清理CSS代码库

>您刚刚进入了一个现有项目以替换离职的开发人员。或者，也许您刚刚从几年前开放了您的旧项目。查看代码时，您会面临恐惧和恐惧。您只能做一件事：清理这个混乱！这听起来对您熟悉吗？当然，我们都在某个时候或另一个时刻遇到了这一点。

您知道清理CSS代码库将是一项巨大的任务。有很多事情要做，但是时间却很少 - 尤其是当客户/老板/同事倡导好善良的“不要修复没有破坏的东西”的格言时。您真的不知道从哪里开始！

>好吧，您很幸运，因为我已经完成了CSS清理工作的份额，我在这里给您一些提示以开始。这全都是要抓住低悬挂的水果。

钥匙要点

覆盖CSS代码库是清理它的第一步，因为它确定了潜在的错误和不良实践。诸如SCSS-lint之类的工具可用于检查SASS文件夹是否错误。

修改代码库的结构至关重要。只要遵守哪种方法，选择哪种方法都没关系。这可能涉及重组代码以符合所选方法，或者识别可重复使用的界面块并将其样式提取到自己的部分中。

删除多余的代码是良好CSS的关键。未使用的声明可能会堆积技术债务，因此，重要的是要定期检查每个CSS声明是否有影响，如果没有影响，请将其删除。

>定期从事工作和逻辑上的小委员会变化，如果出现问题，则更容易回到历史上。当重构CSS代码库时，这一点尤其重要，因为有些事情可能会沿途破裂。

皮棉

在本节中，我将假设您的代码库使用SASS。不仅是因为这是当今合理的假设，而且还因为我注意到SASS的使用量较差通常是对凌乱的代码库的部分原因。尽管如此，即使您不使用预处理器，本文也可能与您有关，所以请忍受我。

>当我需要接管代码库时，我想做的第一件事就是棉布。覆盖是运行寻找潜在错误和不良实践的程序的过程。我相信使代码清洁是使代码良好的第一步。这是一个关于“绒毛”一词的词源的有见地的堆栈溢出线

SASS具有一个基于红宝石的linter，称为scss-lint。您可以自己配置它，或从Sass-Guidelines中获取推荐的配置文件，以立即开始。还有一个node.js版本称为sass-lint，尽管它们不是100％可互用的，因此您的里程可能会有所不同。

>尝试在您的SASS文件夹上运行SCSS-lint以检查错误。很可能会被错误墙淹没。通常，这是您要放弃的时间。但是忍受我！在这一点上，您可以尝试使您不在乎的规则（例如颜色格式）使您的绒布文件变得不太严格，也可以将其前面处理并从中地狱来解决野兽！

固定覆盖错误

是时候修复需要修复的内容了。有两种方法。第一个是一个一个一个一个，一个一个似乎是错误和/或奇怪的内容，例如命名差异不好的惯例，过于深度的nest-nest选择器，格式较差的代码等。第二个（和我最喜欢的）是启动进行一些搜索和替换。我不认识你，但我喜欢正则表达式，所以当我必须这样做时，总是很有趣。

> 例如，假设您要在所有浮点数的前面（即0到1之间的数字值）（即SCSS-LINT的LeadingZero规则）中添加缺失的前导零。您可以搜索s。（d）（所有数字之后的所有数字和一个点），然后用0。$ 1（空间，零，点和找到的数字）。或者，如果您想尊重SCSS-lint的BorderZero规则，则可以替换边框：无边框：IDE中的0。简单如派！

>我最近在Github上启动了SCSS-LINT-REGEX存储库，以在一个地方收集这些正则表达式。如果您正在努力覆盖大型项目，请务必看看。还要通过搜索和更换，因为它有时会产生意外的副作用。每次替换后，请确保执行git差异以检查已更新的内容，以确保您不引入错误。

>完成横向编辑后，您将不会逃脱手动文件爬行以清洁需要清洁的所有内容（凹痕不良，缺失或额外的空线，缺失空间等）。这需要大量时间，但是对于下一步会有很大帮助，因此从此开始很重要。

修改结构

当我进入现有项目时，我经常会感到不安的是缺乏适当的项目体系结构。一开始可能有一个，但是事情通常会失控，而这种方法论的简短想法沿线迷失了方向。尽管如此，这还是非常重要的。

>只要您对它感到满意并坚持下去，您选择哪种方法并不重要。可能是SMACS，可能是7-1，它可以ITCSS - 选择您的选择！然后尝试重组事物，使代码符合所选方法。我主要使用SASS指南中引入的7-1模式，因此，如果您决定这样做，我会为您提供一些提示。

>从>供应商开始，因为它是没有问题的文件夹。将任何未包装的第三方库移动到那里（即，任何未通过NPM或Bundler视为常规依赖性的库）。> 然后，转到

摘要

文件夹。确保项目定义的所有变量，混合素，功能和占位符。只要您最终在代码库的所有文件中都没有变量和混音，就可以随时按照您想要的方式组织它。当时我还倾向于寻找不必要的变量（和混合物）。确实，我经常发现无数使用一次或两次使用的变量（换句话说，不值得）。> 完成后，就是您的电话。您可以尝试确保

> base

文件夹中的所有内容实际上都是基本的东西，而不是相关的组件，或者您可以查看布局文件夹，以检查是否所有有关总体布局居住在那里，并正确记录了。> 最后，您将不得不解决>组件

，这可能是一项巨大的任务。我在这里的建议是尝试使组件尽可能小且可重复使用。只要您使它们使它们上下文不可知，并且易于阅读，理解和更新。例如，拥有如此小的组件是一件不好的事情：

> 思考模块化。小的。简单的。独立。

删除多余的

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

登录后复制

我相信好和坏CSS之间的最大区别是使其正常工作所需的代码量。 CSS作为一种语言很容易掌握。任何人都可以在每个布局中进行一些反复试验和错误。但是，能够用最少的CSS来构建一些使它起作用的CSS并保持这种方式是一个真正的挑战。

已经超过3年了，但是尼古拉斯·加拉格尔（Nicolas Gallagher）的推文仍然是我最喜欢的有关CSS的报价：> 在“坏” CSS中，很难写“好” CSS。在“好” CSS中，很容易固定“不好”的CSS并启动代码腐烂。

- 尼古拉斯（@necolas）2012年9月26日过时是CSS的真实瘟疫。当使用CSS构建某些东西时，我们经常来回尝试一些事情 - 以至于我们通常会得到一些不需要的声明。例如，溢出：隐藏的不必要的，或者是没有区别的字体大小。通过离开它们，我们堆积了技术债务。那是Bad™。

写作css时，我想在进行CSS工作之前想做的事情正在打开开发人员工具，并切换我写的每份CSS声明，以查看它们是否都有影响。如果他们不这样做，我问自己为什么他们首先在那里。如果事实证明它们是不必要的，我将其删除。通过做一些简单的事情，我确保只有有用的无用的无垃圾代码才能将其推向存储库。

清理 css代码库没有什么不同。找到您想清理的组件，打开DevTools，然后尝试查找无用的声明。有时，为了删除某些CS，我们需要移动树上的一些样式，以使级联受益。考虑以下示例减少到最低限度：

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

登录后复制

>一种优化的干净方法是将颜色移动：红色声明向父母移动，让级联的其余部分。当然，现实生活中的例子通常更为复杂，但这表明我们有时会忘记在 *c *ss。中利用> c

css很聪明，你应该太

我经常遇到的一件事是缺乏对继承，初始和当前颜色值的理解。假设您希望链接与核心文本具有相同的颜色（因为下划线足够）。以下是

不良的方法：>

<span><span>.parent</span> {
</span>  <span>/* ...stuff here... */
</span><span>}
</span>
<span><span>.child-A</span> {
</span>  <span>color: red;
</span><span>}
</span>
<span><span>.child-B</span> {
</span>  <span>color: red;
</span><span>}</span>

登录后复制

它是一个差的解决方案的原因应该很明显：如果您更改身体副本的颜色，链接颜色将被脱离同步。如果您正在考虑使用变量，则使事情变得不必要地复杂。最重要的是，如果一个链接最终以灰色段落（例如在块引文内部），则它将与颜色不匹配！

> CSS具有一种内置的处理方式，并具有继承的值。

那样简单。因此，链接将始终继承其父母的颜色。这也可能正在继承其祖先的颜色，依此类推。

<span>a {
</span>  <span>color: black; /* Nope */
</span><span>}</span>

登录后复制

按照相同的行，将财产重新定位到其默认值时，对硬码所述值是一个糟糕的想法。对于这种情况，CSS具有最初的魔术价值。虽然通常不会有所作为，但在某些情况下确实很重要，例如基于方向的属性，例如文本对准。重置文本单位时，剩余的设置可能会损坏RTL语言；最初是要走的路（甚至更好，开始，但是此值在IE9中没有支持）。

>最后但并非最不重要的一点是，CSS开发人员的数量不知道CurrentColor太高了。如果您不知道，不要感到难过，但是请问自己：当不指定边框颜色时，它如何自动匹配元素的颜色？好吧，这是因为边界色的默认值是CurrentColor（检查规格）。一个显而易见的名字，你会承认。

>我的意思是，如果您希望与元素字体共享颜色，请使用CurrentColor而不是硬编码值或SASS变量。

<span><span>.quote</span> {
</span>  <span>padding: 10px;
</span><span>}
</span>
<span><span>.quote__attribution</span> {
</span>  <span>font-size: 80%;
</span><span>}
</span>
<span><span>.quote > :first-child</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span><span>.quote > :last-child</span> {
</span>  <span>margin-bottom: 0;
</span><span>}</span>

登录后复制

所有这些都是基本的CSS功能。它们就是使CSS的本质。尽管如此，它们的使用量很少。因此，如果您必须改进组件的代码，则这些是您要进行的改进的种类。

让您的git好

>重构CSS代码库是很多工作的

。您可能会更新数十个文件。您也很可能会沿途破坏事情。老实说，我们都会犯错误，在处理如此巨大的变化时，如果您成功地清理所有东西而没有小小的失误，那将是非常令人印象深刻的。> 因此，我强烈建议您对自己的版本控制变得非常刻板（我认为可以在此处假设GIT公平）。这意味着要做一件事，而只有一件事才能回到包含一个错误的步骤，而不会像地狱一样挣扎着冲突。

清理CSS代码库我知道很多人的git是艰难而晦涩的，并且挖掘如何使其变得简单的方式超出了本文的范围。不过，您必须相信我：如果您不想生气，请使您的GIT历史成为一首诗。

>将其包裹起来

>让我们总结一下，为懒惰的读者提供一点tl;

>清洁CSS/SASS项目很难，因为很难评估更新或删除CSS的影响。这主要是因为CSS几乎无法测试。因此，您必须小心。

>从覆盖您的代码开始，使其变得漂亮。首先，以使您的生活以后更轻松。这也是获得有价值的代码库状态而不会冒险的好方法（修复语法污垢不太可能造成任何麻烦）。

接下来，请确保您的项目包含结构方法。只要做得好，哪一个都没关系。如果您的项目并没有真正精心策划为组件，那么这将是一个开始这一道路的好机会。找到可重复使用的界面块，并将其样式提取到自己的部分中。可以随意记录一下它们，这样就变得更容易了，并且您会感觉到进步。

>一旦您清理了项目并将所有内容都放在正确的位置，就该改善CSS本身了。检查是否可以先删除内容；我们经常编写太多的代码。然后尝试优化代码，以使其重复性降低。当心不要过度工程！您应该消除复杂性，而不是添加。还可以随意评论您所做的所有事情，这可能乍一看似乎并不明显。>

>最后，定期和逻辑地提交您的工作。捆绑您在小提交中的变化，每件事都要做一件事情，因此如果出现问题，就可以简单地回到历史上。

最后但并非最不重要的一点是，不要忘了庆祝完成。祝你好运！

经常询问的问题（FAQ）有关清理CSS代码库

清理CSS代码库的重要性是什么？

>清理CSS代码库至关重要。首先，它提高了代码的可读性，使其他开发人员更容易理解和工作。其次，随着不必要或冗余代码的删除，它可以提高网站或应用程序的性能。这可以导致更快的负载时间和更好的用户体验。最后，干净的代码库更易于维护和调试，从长远来看节省了时间和资源。

如何识别冗余或不必要的CSS代码？

>帮助确定未使用或冗余的CSS代码。其中包括浏览器开发人员工具，CSS覆盖工具和各种在线服务。此外，手动代码审查也可能是有益的，特别是对于确定代码中的冗余或不一致。 CSS代码库包括删除未使用或冗余代码，以逻辑和一致的方式组织代码，使用注释来解释代码的复杂部分，并粘附达成一致的命名惯例。此外，使用CSS预处理器可以帮助管理和维护大型代码库。