>您刚刚进入了一个现有项目以替换离职的开发人员。或者，也许您刚刚从几年前开放了您的旧项目。查看代码时，您会面临恐惧和恐惧。您只能做一件事：清理这个混乱！这听起来对您熟悉吗？当然，我们都在某个时候或另一个时刻遇到了这一点。
>您知道清理CSS代码库将是一项巨大的任务。有很多事情要做，但是时间却很少 - 尤其是当客户/老板/同事倡导好善良的“不要修复没有破坏的东西”的格言时。您真的不知道从哪里开始！
>>好吧，您很幸运，因为我已经完成了CSS清理工作的份额，我在这里给您一些提示以开始。这全都是要抓住低悬挂的水果。
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>已经超过3年了，但是尼古拉斯·加拉格尔（Nicolas Gallagher）的推文仍然是我最喜欢的有关CSS的报价：
写作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
不良的方法：>
<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>让您的git好
。您可能会更新数十个文件。您也很可能会沿途破坏事情。老实说，我们都会犯错误，在处理如此巨大的变化时，如果您成功地清理所有东西而没有小小的失误，那将是非常令人印象深刻的。> 因此，我强烈建议您对自己的版本控制变得非常刻板（我认为可以在此处假设GIT公平）。这意味着要做一件事，而只有一件事才能回到包含一个错误的步骤，而不会像地狱一样挣扎着冲突。
>
我知道很多人的git是艰难而晦涩的，并且挖掘如何使其变得简单的方式超出了本文的范围。不过，您必须相信我：如果您不想生气，请使您的GIT历史成为一首诗。
>将其包裹起来
>
>从覆盖您的代码开始，使其变得漂亮。首先，以使您的生活以后更轻松。这也是获得有价值的代码库状态而不会冒险的好方法（修复语法污垢不太可能造成任何麻烦）。接下来，请确保您的项目包含结构方法。只要做得好，哪一个都没关系。如果您的项目并没有真正精心策划为组件，那么这将是一个开始这一道路的好机会。找到可重复使用的界面块，并将其样式提取到自己的部分中。可以随意记录一下它们，这样就变得更容易了，并且您会感觉到进步。
>一旦您清理了项目并将所有内容都放在正确的位置，就该改善CSS本身了。检查是否可以先删除内容；我们经常编写太多的代码。然后尝试优化代码，以使其重复性降低。当心不要过度工程！您应该消除复杂性，而不是添加。还可以随意评论您所做的所有事情，这可能乍一看似乎并不明显。
最后但并非最不重要的一点是，不要忘了庆祝完成。祝你好运！
经常询问的问题（FAQ）有关清理CSS代码库
清理CSS代码库的重要性是什么？>清理CSS代码库至关重要。首先，它提高了代码的可读性，使其他开发人员更容易理解和工作。其次，随着不必要或冗余代码的删除，它可以提高网站或应用程序的性能。这可以导致更快的负载时间和更好的用户体验。最后，干净的代码库更易于维护和调试，从长远来看节省了时间和资源。如何识别冗余或不必要的CSS代码？>帮助确定未使用或冗余的CSS代码。其中包括浏览器开发人员工具，CSS覆盖工具和各种在线服务。此外，手动代码审查也可能是有益的，特别是对于确定代码中的冗余或不一致。 CSS代码库包括删除未使用或冗余代码，以逻辑和一致的方式组织代码，使用注释来解释代码的复杂部分，并粘附达成一致的命名惯例。此外，使用CSS预处理器可以帮助管理和维护大型代码库。
>> CSS预处理器在清理CSS代码库中的作用是什么？清理CSS代码库。它允许使用变量，嵌套，混合物和其他可以使代码更可读和可维护的功能。此外，它可以帮助自动化诸如缩小和自动固定之类的任务，从而进一步提高代码库的清洁度和效率。
>清理CSS代码库可以通过减少浏览器下载和解析的代码数量来改善网站性能。这可能会导致加载时间更快，并获得更顺畅的用户体验。此外，删除不必要的或冗余的代码可以减少可能影响性能的冲突或错误的可能性。
>>
>我可以使用哪些工具来自动清理CSS代码库的过程？ 🎜>有几种可以自动化清理CSS代码库的工具。这些包括CSS预处理器，衬里和微型仪。此外，还有一些在线服务可以分析您的代码库并确定改进的区域。>我应该多久清理一次CSS Codebase？>
> > CSS Codebase清理的频率取决于几个因素，包括代码库的大小，从事其工作的开发人员数量以及项目的复杂性。但是，作为一般规则，定期的代码审查和清理应成为开发过程的一部分，以确保代码库保持清洁和可维护。>
>清理CSS代码库有哪些挑战？ >清理CSS代码库可能是一项复杂的任务，尤其是对于大型旧代码库。挑战可能包括识别未使用或冗余代码，保持与较旧浏览器的兼容性，并确保更改不会破坏现有功能。此外，这可能是耗时的，尤其是没有使用工具来自动化过程的情况。以上是清理CSS代码库的详细内容。更多信息请关注PHP中文网其他相关文章！
