当人们说“干净的代码”时，通常是指“易于阅读的代码”。我知道完整的定义更接近“易于阅读，维护，理解和更改的代码”，但是人们通常会陷入第一部分。

因此，“易于阅读”通常最终含义“只有几行代码的小文件”，因为开发人员将大文件与很多复杂性相关联（理所当然）。摆脱这种复杂性并不像看起来那么容易，并且并不总是正确的事情。

降低复杂性与隐藏复杂性

降低复杂性是一件好事。这意味着您实际上正在缩小应用程序的复杂性。这可以包括删除一些技术债务，或依靠第三方库来解决您的问题，而不是拥有一堆自定义代码，而您必须维护自己。降低复杂性基本上意味着您和您的同事有更少的代码需要担心。

隐藏复杂性通常发生。大文件在美学上看上去并不令人满意，因此我们根据个人感受提出借口和抽象。我们开始彼此移开事物，从逻辑上属于在一起，因此使代码不那么表现力，更难理解和更难维护。

不要害怕大文件。如果您正在构建的功能是一个复杂的功能，则代码应反映。

抽象总是增加复杂性

即使它可能会使代码库“看起来”较小，但实际上更为复杂。考虑一下抽象事物时正在做什么：您将一块代码从需要的位置移开。因此，要了解组件内部发生的事情的全部图片，您需要在抽象的代码和其余组件之间跳动，以了解它们如何一起工作。

要清楚：我并不是说抽象总是很糟糕的，您应该将所有内容都内线。我是说您应该非常小心，当您这样做时，出于什么原因。

表达代码更容易维护

这是使用Tailwind的示例，取自this blog post：

<figure class="md:flex bg-gray-100 rounded-xl p-8 md:p-0">
  <img class="w-32 h-32 md:w-48 md:h-auto md:rounded-none rounded-full mx-auto" src="/sarah-dayan.jpg" alt="" width="384" height="512">
  <div class="pt-6 md:p-8 text-center md:text-left space-y-4">
    <blockquote>
      <p class="text-lg font-semibold">
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption class="font-medium">
      <div class="text-indigo-600">
        Sarah Dayan
      </div>
      <div class="text-gray-500">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

您可能会说：

看所有这些课程！太多了，

，但是您只需要了解尾风的工作原理，即可了解此组件正在发生的事情。

如果我们想更改此组件的外观，我们只需要添加/删除相应的类，并且一切都完成了。即使有很多东西，代码也易于理解，维护和扩展，即使对于新手的代码库中的人也很容易。

。

我们还可以尝试将这些类抽象为单个CSS选择器，并使HTML“看起来很漂亮”，然后将所有类移动到看起来像这样的单独的scss文件中：

figure {
    @extend .bg-gray-100;
    @extend .rounded-xl;
    @extend .p-8;
    @extend .md\:flex;
    @extend .md\:p-0;
    img {
        @extend .w-32;
        @extend .h-32;
        @extend .rounded-full;
        @extend .mx-auto;
        @extend .md\:w-48;
        @extend .md\:h-auto;
        @extend .md\:rounded-none;
    }
    & > div {
        @extend .pt-6;
        @extend .text-center;
        @extend .space-y-4;
        @extend .md\:p-8;
        @extend .md\:text-left;
        blockquote p {
            @extend .text-lg;
            @extend .font-semibold;
        }
        figcaption {
            @extend .font-medium;
        div.name {
                @extend .text-indigo-600;
            }
        div.work-role {
                @extend .text-gray-500;
            }
        }
    }
}

并将HTML更改为：

<figure>
  <img src="img/175062.png" alt="" width="384" height="512">
  <div>
    <blockquote>
      <p>
        “Tailwind CSS is the only framework that I've seen scale
        on large teams. It’s easy to customize, adapts to any design,
        and the build size is tiny.”
      </p>
    </blockquote>
    <figcaption>
      <div class="name">
        Sarah Dayan
      </div>
      <div class="work-role">
        Staff Engineer, Algolia
      </div>
    </figcaption>
  </div>
</figure>

，但这使得很难理解组件：

每个标签的样式已移开，因此您必须浏览scss选择器才能了解影响什么。
扩展此代码更加困难，因为必须在多个地方完成。而且，您必须小心其他选择器相互影响的样式。
维护代码也更加困难，因为您需要确保不会在每个文件中删除/更改错误的内容。

可维护>美学

一天结束时，我们正在制造产品，而不是为世界上最令人愉悦的组成部分竞争。编码不是最终目标 - 这是达到目的的手段。您编写的代码必须由您和您的同事维护和扩展。表达自己的写作，不要使事情变得更复杂。

进一步阅读：
The Grug Brained Developer