如何使我的 CSS 具有可伸缩性和可维护性? 这是每个前端开发人员都关心的问题。【译】

介绍

2016年，我们发表了一篇关于 ITCSS 的文章，在那里我们分享了在我们自己的开发工作流程中实现 ITCSS 的经验。当时，哈里•罗伯茨(harryRoberts)创建的 ITCSS 是一种新的 CSS 方法论。

2017年，哈里•罗伯茨(harryRoberts)在 Xfive 办公室的性能讨论会

关于 ITCSS 的资源很少，所以我们的文章在 Google 上占据了第一位，并且一直保持到今天。这使我们能够分享一些关于人们对此感兴趣的第一手数据。

多年来，该博客文章已经积累了29万页面浏览量。它每月仍有约1500的网页浏览量，但有明显的下降趋势。

我们的 ITCSS文章的页面浏览量正在缓慢下降

这与 CSS2020年的调查结果一致，其中对 ITCSS 的关注度在一年内从40% 下降到37% 。

如果我们从同一资源查看满意度与使用率图，我们会发现 ITCSS 处于低使用率/高满意度象限。

ITCSS 的满意度排名从2019年的84% 下降到2020年的78% ，但它仍然优于一些竞争对手。

那么，为什么具有高用户满意度的方法不更受欢迎呢？

ITCSS 仍然是部分专有的，并且没有任何可用的开源文档。虽然这阻止了 ITCSS 的广泛采用，但我们尊重哈里的知识产权。学习 ITCSS 的最好方法是他的技能分享课程。

一旦您熟悉了基本思想，本文将帮助您获得关于 ITCSS 的更广泛的视角，并填补一些空白。

什么是ITCSS？

ITCSS 代表倒三角 CSS。它帮助您组织您的项目 CSS 文件的方式，您可以更好地处理 CSS 的细节，如全局名称空间，级联和选择器特异性。

您可以使用带有预处理器或不带预处理器的 ITCSS，并且它与诸如 BEM、 SMACSS 或 OOCSS 之类的 CSS 方法兼容。

ITCSS 的主要思想是将 CSS 代码分成几个部分(称为层) ，这些部分可以表示为一个倒三角形的部分:

这些层是：

• Settings- 与预处理器一起使用，包含字体、颜色定义等
• Tools- 全局使用的混合和函数。重要的是不要输出任何 CSS 在前2层。
• Generic - 重置和/或标准化样式，框大小定义等，这是第一层，生成实际的 CSS。
• Elements- 为纯 HTML 元素(如 H1、 A 等)设计样式。这些都是来自浏览器的默认样式，所以我们可以在这里重新定义它们。
• Objects - 定义未修饰设计模式的基于类的选择器，例如 OOCSS 中已知的媒体对象
• Components- 特定的 UI 组件。这是我们大部分工作的地方。我们经常组合对象和组件的 UI 组件
• Utilities- 实用程序和 helper 类，它们能够覆盖三角形之前的任何内容，例如 hide helper 类

这个三角形还显示了样式在生成的 CSS 中是如何出现的: 从通用样式到显式样式，从低特异性选择器到更具体的样式，从影响深远的样式到本地化样式。

这样的CSS组织方式将帮助您避免特异性竞争，并产生健康的特异性图表。

ITCSS使用技巧

多年来，在Xfive使用ITCSS期间，我们收集了一些关于如何使用它的技巧。

根据您的需求调整ITCSS

ITCSS在工作流和工具方面非常灵活。您是否担心涉及大量样板文件？这由您决定。ITCSS并不要求您必须有所有层（如果存在）（只要按照它们出现的顺序）。

在最小设置中，您可以只有默认元素样式的组件，这些样式来自浏览器。当然，这并不是很实用。几乎每个人都会出于好的原因使用一些设置、重置和/或规范化CSS。

使用BEMIT

使用BEMIT命名约定，特别是其命名空间（.c-user，.o-media等）。这将使您专注于解决前端挑战，而不是思考样式名称和其位置。

深入了解BEM也有所帮助。

将层组织到子文件夹中

将ITCSS层组织到子文件夹中，并使用Sass或其他预处理器编译新添加的文件

@import 'settings/*';
@import 'tools/*';
@import 'generic/*';
@import 'elements/*';
@import 'vendor/*';
@import 'objects/*';
@import 'components/*';
@import 'utilities/*';

每个组件使用一个文件

将每个组件存储到其自己的文件中。不要像这样将来自不同组件的样式混合在一个文件中：

// Don't do this

.c-gallery {

}

.c-gallery__image {
}

.c-title {

}

如果您使用像React或Vue这样的现代UI库，可以将所有组件相关的文件保存在一个文件夹中：

MyComponent/MyComponent.tsx
MyComponent/my-component.scss

限制嵌套

将嵌套限制在2个级别以内。许多开发人员认为使用父选择器（&）是必须的，只是因为他们使用了Sass。使用完全展开的扁平结构也没有问题。通常更容易扫描和搜索代码。

.c-teaser {
   padding: 2em;
}

.c-teaser--small {
  padding: 1em;
}

.c-teaser__title {
  font-size: 2em;
}

使用您喜欢的样式，但避免深层嵌套，因为这会导致过度限定的选择器。这些选择器违背了ITCSS的精神。

不要过度使用对象（或完全省略它们）

对象是ITCSS中最令人困惑的部分。理论上，它们非常有意义，但事情很容易失控。看一下我们自己网站几年前构建的这个例子：

<section class="o-section o-section--more-v-spacing o-section--dark 
o-section--above-sidebar c-banner c-banner--dark js-section-above-sidebar">

ITCSS的前提是可以轻松追踪特定样式的来源以及它们如何影响页面元素的样式。如果组件的样式来自两个或更多来源，例如对象和组件，则可能很难做到这一点。但是，通常很难在各种CSS属性之间划清界限，以确定它们属于对象还是组件。

有一些方法可以避免这种情况：

• 完全省略objects，只使用Components
• 在HTML中嵌套objects和components，以避免将太多classes放在一个HTML元素上。
• 将您的spacing系统与对象和组件分开，正如我们将在下一点中讨论的那样。

将spacing system与components分开

用Max Stoiber的话来说，“Margin破坏了组件的封装。一个构建良好的组件不应该影响其外部任何内容。”

可重用的组件可以出现在不同的上下文中，其与其他元素的距离可能不同。如果我们尝试通过向组件本身添加边距来处理所有不同的上下文，通常会得到许多修饰符类。

在ITCSS中解决这个问题的一种方法是使用包装器或间距对象或组件。另一个更灵活的解决方案是创建用于边距和间距的实用程序类，类似于Tailwind所做的。

不要担心样式重复

如果像ITCSS这样基于组件的CSS架构存在任何问题，可能是样式重复。组件封装样式，使我们避免了CSS冲突和覆盖，但它们也可能导致样式重复。

不要过分担心样式重复，并且不要将太多样式抽象为对象。更新在几个独立组件中重复的特定样式比追踪抽象为多个对象或组件的一系列样式要容易得多。如果您经常这样做，那么适用于实用主义的系统可能更适合您的思维方式。

结论

在Xfive，我们已经使用ITCSS已经五年了。它非常适用于那些没有内置支持用来限定CSS作用域的项目，例如WordPress项目。 ITCSS是我们自定义的WordPress开发框架Chisel 的一部分。

然而，即使在更常见的CSS限定作用域的项目中，例如React项目，这通常也是我们首选的方法。

您使用ITCSS时绝对不会出错。这是Harry Roberts的多年经验和努力工作的结果，他是最受尊敬的CSS作者之一。如果您不介意稍微深入研究一下相关资源，您将学习到一种简单但强大的架构，可以让您为您的小型或大型项目创建可扩展和易于维护的CSS。

• 原文在这
• 相关的使用文章，样例代码可能需要科学上网