了解 ITCSS：GhostCMS 博客中使用 ITCSS 的真实案例

我在为自己的博客https://carloscaballero.io设计的主题中应用了 ITCSS 架构，该主题在GitHub上可用，因此您可以自由使用它。

如果 CSS 编写不当，会让人很头疼，更糟糕的是，大多数情况下 CSS 的组织方式都不正确。使用 CSS 时主要存在以下问题：

1. 全局范围。CSS中的所有规则都处于同一范围内，因此当您使用不同的样式表时可以覆盖规则。

2. 级联规则。当涉及全局范围时，源顺序确实很重要。

3. 继承。规则之间可以继承，由于这一特性，您可以预期不同的行为。

4. 选择器的特殊性。创建样式表时最大的问题之一来自于对选择器操作的了解不够深入。

这些问题在大型项目中屡见不鲜，因为很多开发人员缺乏框架或工作规则。不幸的是，这种情况最终导致样式表混乱不堪。

因此，解决方案是按特定顺序编写 CSS，该顺序由 ITCSS 提供。

ITCSS（倒三角 CSS）

ITCSS是由Harry Roberts创建的，特别适用于大型项目的架构。它既不是一个库，也不是一个设计框架（例如 Bootstrap、Angular Material），而是一种构建样式表元素的方法。该架构不依赖于预处理器（例如 SASS、Stylus 或 LESS），但强烈建议使用它们，以便从该架构的使用中获得更大的收益。

简单来说，ITCSS 是一种在层内组织 CSS 文件的方法——从通用到显式，从低到高特异性。

在下图中，您可以看到倒三角形：

三角形的各层如下：

1. 设置——与预处理器一起使用，包含字体、颜色定义等。在此层中通常定义可以自定义模板的变量。

2. 工具——全局使用的混合宏和函数。只有当我们使用像 SASS 这样的预处理器时才会用到这一层。

3. 通用——重置和/或规范样式、盒子大小定义等。值得注意的是，这是生成 CSS 的三角形的第一层。

4. 元素— 裸 HTML 元素的样式（例如 H1、A、header、footer 等）。这些样式自带浏览器默认样式，因此我们必须在此处重新定义它们。

5. 对象——基于类的选择器，定义未修饰的设计模式，例如 OOCSS 中已知的媒体对象，例如列表、单选按钮。Daniel Fornell 的 Codepen https://codepen.io/collection/DmzVOM/展示了使用此架构设计的对象列表。

6. 组件—— 具体的 UI 组件。例如，我们页面的组件，例如按钮、卡片、具体列表等等。

7. 实用程序— 实用程序和辅助类，能够覆盖三角形中之前发生的任何事。

真实的例子——这个博客！

理解一项新技术或架构的最佳方式是通过示例。因此，我将向您展示我是如何基于该架构设计此博客主题的。

本博客使用功能强大的GhostCMS工具开发，该工具允许我们使用Handlebars和 CSS 结合创建自己的模板。然而，为了生成本主题的 CSS，我决定使用 ITCSS 架构，该架构基于SASS，它会将代码转换为最终的 CSS 样式表，从而呈现主题的视觉效果。

因此我们首先要看到的就是这个项目的目录结构，如下图所示。

在这个结构中你可以观察到以下部分：

• partials：博客页面不同部分的结构所在的 handlebar 文件，例如页脚、页眉、分页、帖子列表、侧边栏。

• assets：我们在其中找到以下子文件夹：

• css：这是我们使用 ITCSS 构建样式表的地方。

• 字体：不同的字体。

• img：图像。

• js：需要 JavaScript 库，例如highlight.js。

• /：在根目录中我们找到与index，post，tag和default对应的handlebar文件以及一些配置文件，例如package.json或gulpfile。

接下来，我们将描述每个 ITCSS 层的 .scss 文件，以便能够看到每个层中包含的内容。

设置

settings.scss文件内容如下：

您可以看到，此文件的作用是定义要使用的字体和整个主题将使用的调色板。在此文件中，我们主要定义了以后想要自定义的所有变量。

tools.scss文件内容如下：

在这一层，我们仍然不编写 CSS，但我们正在定义一些工具（函数），以便于在更高层执行重复性任务。在这一层，我们定义了三个函数：

• box-size。这允许我们使用两个参数来定义框的大小。

• flex . 这个 mixin 为不同的容器配置 Flex-Layout 规则。

• postTitle。此混合宏会生成一些 CSS 规则，这些规则在上层重复出现，但会改变其容器，并且某些规则会被覆盖。因此，我们不再重复这些规则，而是提取函数中通用的规则，以便为通用代码提供一个单一的入口点。

通用的

generic.scss文件内容如下：

通用文件非常简单，因为它只包含一条规则，允许我们更改页面所有元素的边距和填充，以及配置默认字体。

此外，本节还包含一条与 disqus 评论服务的评论样式相关的规则。您可以看到，为了使插件正常工作，必须为容器分配一个标识符 (id = 'disqus_thread')，但这会完全破坏 ITCSS 架构。为此，我们使用了一种技术来降低该元素的特异性，直至属性级别（使用属性选择器）。

元素

elements.scss文件内容如下：

在这一层我们配置与html和body元素相关的样式。

泛型

generic.scss文件内容如下：

在这一层中，影响 HTML 元素的通用规则必须结构化。请注意，这里没有定义类，而只使用了 HTML 元素、伪类和伪元素。在这一层中，我们利用了 SASS 的强大功能来嵌套 CSS 规则，从而避免了冗长的代码。事实上，如果我们查看特异性图，就会发现与我们生成的嵌套层级相关的峰值，这很正常。

对象

objects.scss文件内容如下：

/** EMPTY **/

在设计模板的这个阶段，我们还没有与对象相关的任何规则，因为规则在对象级别非常低时就被划分为元素，而在对象获得足够的语义值时则被划分为组件。因此，目前我们在这一部分中没有任何规则，但定义它并非坏事，因为在架构的持续重构和改进中，我们可以利用这一层。

成分

components.scss文件内容如下：

这一层级别更高，因此我们在这里找到更具体的规则，并在此进行最后的润色。如果你仔细观察这一层，你会发现许多规则定义了具有主题语义值的元素。考虑到网页是由许多组件组成的，这里是最后的润色。

实用工具

utility.scss文件内容如下：

最后，实用程序层被保留为“全部包含”层，在我们的例子中，我们在这里保留了可以完美地转移到较低层的动画，因为它们是通用的，但我们更愿意将其转移到实用程序层。

运行代码并导入

最后，将上述文件从一个充当加载器的文件中导入。该文件的内容如下：

为了将 SASS 的内容转换为 CSS 并将其最小化，我创建了以下 npm 脚本。

结论

在本文中，我想向你展示一种名为 ITCSS 的样式表架构。该架构与其他方法论（例如 BEM 或 OOCSS）完全兼容。该架构基于这样一种方式来组织 CSS 规则，即我们能够控制由于样式表作用域是全局的而可能出现的混乱。

最后，我向您展示了如何使用这种架构创建此博客的主题，该主题是免费的，在 GitHub 上开源，以便任何想要在其博客上使用它的人都可以使用它。

更多，更多，更多……

• Carloscaballero.io 主题：Ghost 的免费开源主题

• ITCSS：可扩展且可维护的 CSS 架构。

• 如何使用 ITCSS 组织您的样式。

• 使用 ITCSS 管理大型 CSS 项目。

• trivago 的 CSS — 第 1 部分：结构和 ITCSS。

• 面向 Web 开发人员的 ITCSS 简介。

最初发表于www.carloscaballero.io。