摘自蒂芙尼·布朗撰写的《CSS大师》一书节选。本书在全球各地书店有售，您也可以在此处购买电子书版本。
良好的 CSS 架构的一部分在于文件组织。对于单人开发者或非常小的项目来说，单体文件就足够了。对于大型项目——拥有多个布局和内容类型，或多个品牌共用同一设计框架的网站——使用模块化方法并将 CSS 分割到多个文件中更明智。
将 CSS 分割到多个文件中，可以更轻松地将任务分配给团队。一个开发者可以负责与排版相关的样式，而另一个开发者可以专注于开发网格组件。团队可以合理地分配工作，提高整体生产力。
那么，将 CSS 分割到多个文件的良好文件结构可能是什么样的呢？以下是一个类似于我在近期项目中使用的结构：
reset.css：重置和规范化样式；最少的颜色、边框或字体相关的声明typography.css：字体、字重、行高、大小以及标题和正文文本的样式layouts.css：管理页面布局和段落的样式，包括网格forms.css：表单控件和标签的样式lists.css：列表特定的样式tables.css：表格特定的样式carousel.css：轮播组件所需的样式accordion.css：手风琴组件的样式如果您使用预处理器，例如 Sass 或 Less，您可能还需要包含一个 _config.scss 或 _config.less 文件，其中包含颜色变量等。
在此结构中，每个 CSS 文件都有一个特定且范围狭窄的作用域。最终使用的文件数量取决于网站设计需要多少视觉模式或组件。
Foundation 和 Bootstrap 等 CSS 框架使用这种方法。两者都非常细致，为进度条、范围输入、关闭按钮和工具提示等使用单独的文件。这允许开发者仅包含项目所需的组件。
与这样将 CSS 分割到多个文件中密切相关的概念是模式库。Anna Debenham 的“模式库入门”是对该主题的很好的入门介绍。
即使我们在开发中使用多个 CSS 文件，我们也不会以这种形式将所有文件都提供给浏览器。所需的 HTTP 请求数量会使我们的网站加载速度变慢。相反，我们将把较小的 CSS 文件 连接 成几个较大的文件以用于生产环境。
在此上下文中，连接意味着将多个文件组合成单个 CSS 负载。它消除了对 @import 语句或多个 link 元素的需求。当前的浏览器对一次可以下载的文件数量有限制。我们可以使用连接来减少网络请求的数量，从而更快地将内容提供给用户。
通常，您的 Web 开发框架会将其作为其资产管理功能（例如 Ruby on Rails）的一部分来处理连接。一些内容管理系统也这样做，无论是作为核心功能还是附加组件。在第 9 章中介绍的预处理器也使连接变得容易。如果预处理器和开发框架都不是您工作流程的一部分，那么您的操作系统很可能有一个您可以使用的连接实用程序。
对于 Mac OS X 或 Linux，请使用 cat 实用程序连接文件：
cat file1.css file2.css > combined-output-file.css
使用 Windows？尝试使用 type 实用程序：
type file1.css file2.css > combined-output-file.css
您还可以使用 Bash、PHP、Python 或您选择的其他脚本语言编写自己的连接脚本。
连接是 CSS 优化的一个方面。同样重要的是最小化您的文件以删除多余的字符和空格。第 3 章介绍了最小化工具。
那么您应该使用多少个文件呢？这就是棘手的地方。目前的最佳实践是识别您的关键路径 CSS——页面渲染所需的最小 CSS 量——并使用 style 元素将其嵌入到您的页面中。其他 CSS 文件应使用 JavaScript 加载。Addy Osmani 的演示文稿“CSS 性能工具”提供了对这种技术的出色概述以及您可以用来实现它的某些工具。另请参阅 Filament Group 的 loadCSS。
如果您的内容将使用 SPDY 或 HTTP/2 协议提供服务，则连接可能是不必要的。使用 HTTP/1.1，浏览器按顺序下载资产；下一个请求在上一个请求结束时开始。在这种模型下，减少网络请求的数量可以提高网站性能；但是，SPDY 和 HTTP/2 可以同时下载多个资产。因此，减少请求数量并没有实际好处。但是，发送比渲染页面所需更多的字节是有成本的。William Chan 的“HTTP/2 注意事项和权衡”更详细地解释了这一点。最佳方法是确定您的服务器是否正在提供 HTTP/2 服务，如果是，则检查是否更多用户会受益于实际拆分您的资产并仅加载页面所需的资产，或者继续使用旧方法。如果您有兴趣了解有关性能优化方法的更多信息，SitePoint 的书籍《精益网站》是一个有用的资源。
组织 CSS 文件的最佳方法很大程度上取决于项目的规模和复杂性。对于较小的项目，单个 CSS 文件可能就足够了。但是，对于较大的项目，建议将 CSS 分割成多个文件。这可以根据它们设置样式的组件或页面来完成。例如，您可以为页眉、页脚和主要内容分别创建一个 CSS 文件。这使得您的代码更易于维护和调试。
保持 CSS 代码简洁有序对于可维护性至关重要。您可以通过遵循一些最佳实践来实现这一点。首先，使用注释来描述 CSS 的每个部分的作用。其次，将相关的样式组合在一起。第三，对您的类和 ID 使用一致的命名约定。最后，考虑使用 Sass 或 Less 等 CSS 预处理器来帮助管理您的样式表。
像 Sass 和 Less 这样的 CSS 预处理器是扩展 CSS 功能的脚本语言。它们允许您使用变量、嵌套规则、mixin 和函数，这可以大大简化您的 CSS 并使其更易于维护。预处理器将您的代码编译成浏览器可以理解的标准 CSS。
CSS 模块是一种使您的 CSS 更模块化和可重用的方法。使用 CSS 模块，您的应用程序中的每个组件都有自己的 CSS 文件。这使得管理您的样式更容易，因为更改一个组件的 CSS 不会影响其他组件。要使用 CSS 模块，您需要一个像 Webpack 或 Parcel 这样的构建工具。
注释在 CSS 文件组织中起着至关重要的作用。它们可以帮助您和其他开发人员理解 CSS 的每个部分的作用。这在大型项目中尤其重要，因为您可能有多个 CSS 文件。注释还可以用于在调试期间临时禁用 CSS 的某些部分。
像 Bootstrap 和 Foundation 这样的 CSS 框架提供了您可以用来设置网站样式的预写 CSS。它们还为您的 CSS 提供了统一的结构，使其更易于维护。但是，请记住，如果您没有使用大多数功能，使用 CSS 框架可能会增加网站的不必要膨胀。
CSS 中一致的命名约定使您的代码更易于阅读和理解。它们还使您在需要更新或调试代码时更容易找到特定的样式。您可以遵循几种命名约定，例如 BEM（块、元素、修饰符）、OOCSS（面向对象的 CSS）和 SMACSS（可扩展和模块化的 CSS 架构）。
CSS 变量（也称为自定义属性）允许您存储特定值以便在整个 CSS 中重复使用。这可以大大简化您的 CSS 并使其更易于维护。例如，您可以将网站的主要颜色存储为变量，并在需要该颜色时使用它。
CSS 重置是在 CSS 开始时应用的一组样式，用于重置浏览器应用的默认样式。这确保您的网站在不同的浏览器中看起来一致。CSS 重置还可以使您的 CSS 更易于管理，因为您不必为每个元素重写浏览器样式。
像 Stylelint 和 CSSLint 这样的 CSS lint 工具可以通过捕获错误和强制执行一致的编码样式来帮助您保持 CSS 的组织性。它们可以集成到您的开发工作流程中，以便在您编写 CSS 时自动检查您的 CSS。这可以帮助您编写更简洁、更易于维护的 CSS。
以上是CSS体系结构：CSS文件组织 - 站点点的详细内容。更多信息请关注PHP中文网其他相关文章！
