0Pricing
CSS Academy · 课时

文件组织：ITCSS 与 7-1 模式

使用倒三角模式或 7-1 模式组织 CSS 文件，构建可扩展的项目。

文件组织：ITCSS 与 7-1 模式 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。

为什么要组织 CSS 文件？

随着项目发展，单个 CSS 文件会变得难以管理。文件组织结构可以帮助团队将 CSS 拆分为逻辑层，以正确的顺序加载，并且便于查找。

ITCSS：倒三角 CSS

ITCSS 将 CSS 组织成按特异性递增排序的层。它就像一个倒三角：最宽的（最通用的）规则位于顶部，最具体的规则位于底部。这种组织方式遵循了自然的层叠顺序。

ITCSS 层

ITCSS 的 7 个层（从最通用到最不通用）：

  1. 设置 — 变量和设计令牌
  2. 工具 — 混合宏和函数
  3. 通用 — 重置/规范化
  4. 元素 — 基础 HTML 元素样式
  5. 对象 — 布局抽象（不包含外观样式）
  6. 组件 — 用户界面组件
  7. 实用工具 — 覆盖规则和辅助工具，此处允许使用 !important

ITCSS 文件结构

典型的 ITCSS 文件布局：

  <pre class="file-tree">src/styles/
  01-settings/
    _colors.scss
    _typography.scss
    _spacing.scss
  02-tools/
    _mixins.scss
  03-generic/
    _reset.scss
  04-elements/
    _headings.scss
    _links.scss
  05-objects/
    _container.scss
    _media.scss
  06-components/
    _button.scss
    _card.scss
  07-utilities/
    _text-align.scss
    _display.scss</pre>

7-1 模式

7-1 模式将 Sass 组织成 7 个文件夹和 1 个导入所有内容的主文件：

  • abstracts/ — 变量、函数和混合宏
  • base/ — 重置、排版和基础元素
  • components/ — 按钮、卡片和模态框
  • layout/ — 页眉、页脚、侧边栏和网格
  • pages/ — 页面专属样式
  • themes/ — 多个主题
  • vendors/ — 第三方 CSS

主入口文件

主文件 main.scss 按顺序导入所有局部文件：

  <pre class="file-tree">@use 'abstracts/variables';
@use 'abstracts/mixins';
@use 'base/reset';
@use 'base/typography';
@use 'components/button';
@use 'components/card';
@use 'layout/header';</pre>

使用 CSS 层（@layer）进行组织

现代 CSS 的 @layer 无需预处理器，就能提供与 ITCSS 相同的层叠排序优势。层只需声明一次，其优先级就会固定，不受源代码顺序影响。

  <div class="card text-primary">Layered card text</div>

共置与集中式管理

集中管理样式文件之外，还有一种选择：将组件 CSS与组件文件放在一起。在使用 CSS 模块或 CSS-in-JS 的 React/Vue 项目中，这种方式很常见。

Sass 局部文件的命名

Sass 局部文件以下划线开头（_button.scss）。下划线表示该文件不会独立编译，而必须导入主文件。

将 PostCSS 作为替代方案

如果您不使用 Sass，可以使用带有 @import 插件的 PostCSS，或使用带有 @layer 的原生 CSS @import，在不使用预处理器的情况下实现相同的文件组织方式。

组件 CSS 文件

无论使用 ITCSS、7-1 还是共置文件，每个组件都应拥有自己的文件。请根据文件所设置样式的组件为其命名：_card.scss、button.css、Nav.module.css。

快速检查

在 ITCSS 中，倒三角最顶部（最宽、特异性最低）的是哪一层？

总结

ITCSS 按照层叠顺序，将 CSS 层从通用到具体进行排列。7-1 模式将 Sass 组织成 7 个文件夹，并通过一个主文件导入它们。现代 CSS 的 @layer 原生提供了相同的层叠控制能力。无论采用集中式管理还是共置方式，关键原则都是：每个组件一个文件，并保持导入顺序一致。

常见问题解答

「文件组织：ITCSS 与 7-1 模式」课时是免费的吗？

是的 — 「文件组织：ITCSS 与 7-1 模式」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。

「文件组织：ITCSS 与 7-1 模式」这节课中我会学到什么？

使用倒三角模式或 7-1 模式组织 CSS 文件，构建可扩展的项目。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 CSS Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。

「文件组织：ITCSS 与 7-1 模式」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 CSS Academy 课中编写并运行代码吗？

能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. CSS 架构为何重要
  2. BEM：块、元素、修饰符命名
  3. 文件组织：ITCSS 与 7-1 模式
  4. 避免优先级战争
← 返回 CSS Academy