最近的更新让您能够比以往任何时候都更容易地设置网站样式，具体取决于您想要如何进行样式设置。
正如我在之前的文章中提到的， Hugo v.0.158.0版本引入css.Build函数时，我感到非常兴奋。考虑到 Hugo 已经构建或计划构建的网站样式设计，这些新功能值得关注。不过，这些增强功能也存在一些局限性，您也需要了解这些局限性。
在为基于 Hugo 的网站构建样式结构时，您有很多选择。CSS 本身多年来新增了许多功能，浏览器也得到了改进以更好地支持这些功能。
例如，就在不久之前，像这样简单地嵌套 CSS 代码……
. my-div { background-color : #ffffaa ; h1 { font-size : 2 rem ; color : #005500 ; } p { font-size : 0.75 rem ; } }
……以前需要通过Sass进行预处理，或者通过PostCSS或Lightning CSS等工具进行后处理；但现在，您可以像上面那样直接在生产环境中部署 CSS，任何兼容Baseline 2023的浏览器都会按预期显示。然而，除非您确定网站目标受众中的每个人都在使用足够新的浏览器，否则您必须相应地调整网站的生产样式——手动调整（仅使用 2023 年之前的原生 CSS），或者自动调整（通过 Sass 处理 CSS），或者使用后处理器将现代 CSS转译为与旧版浏览器兼容。这种后处理功能正是css.Build的优势之一（大部分情况下如此；稍后会详细介绍）。
除非您的网站样式非常简单，否则您可能需要将 CSS 组织成多个文件。如果是这样，您就必须确定如何在生产环境中最佳地部署所有这些 CSS。当然，您的 HTML 可以直接链接到多个样式表，但通常最好将多个 CSS 文件（尤其是关键 CSS ）合并到一个生产环境的包中。以前，这需要一个或多个外部包，但 CSS 打包是css.Build为您提供的另一个优势。
此外，您几乎肯定需要对生产环境中的 CSS 文件进行压缩。虽然 Hugo 早已能够对 CSS 文件（以及其他交付的文件）进行压缩，但css.Build现在提供了一种专门针对 CSS 文件进行压缩的新方法。
综上所述， css.Build有一些需要注意的地方，在评估此功能是否可以作为您在 CSS 方面的唯一“助手”时，您需要考虑这些陷阱，而不是在开发中使用 Sass 和/或在生产端使用 PostCSS。
归根结底，您必须判断您的网站可能需要哪些新式 CSS 特性。由于css.Build基于esbuild 包运行，因此了解css.Build在这方面的功能和局限性的最佳途径是查阅 esbuild 本身的CSS 文档；该文档列出了 esbuild 执行转译或浏览器前缀添加的特性。即使掌握了这些信息，您仍然需要测试css.Build如何以及是否转换了所有您希望部署的新式 CSS。
对于那些 esbuild（以及css.Build ）目前无法按您要求转换的 CSS 项，您有两种选择：(a) 添加一些后处理来弥补不足；或者 (b) 决定仅针对那些“识别”这些 CSS 项的浏览器版本。在做出决定时，您会发现Browserslist playground和Baseline提供的浏览器支持列表等工具非常方便。
尽管存在这些限制，但我上面提到的css.Build的其他功能可以减少甚至消除您对其他 CSS 处理器的需求。打包和压缩功能开箱即用。而且，最重要的是， css.Build运行速度非常快，这在开发过程中尤其重要。您的网站规模越大，使用的 CSS 越多，您就越能体会到css.Build的速度优势。
或许，经过一番思考，您会觉得css.Build可能更适合您的网站。除了我们前面提到的那些 CSS 陷阱之外，如果只使用原生 CSS 和css.Build方案，您还会失去什么呢？为了帮助您解答这个问题，让我们最后来看看在 Hugo 中如何使用这些替代方案：
-
Sass 预处理（涉及编写
.scss或.sass文件，而不是.css文件）- 需要使用 Dart Sass 二进制文件（但与Hugo Pipes配合使用非常流畅和快速）。
- 它不提供浏览器前缀。请记住，它是一个预处理器。要实现浏览器前缀功能，您需要使用 Sass和后处理器，这会增加复杂性，并可能降低您的工作效率，尤其是在开发过程中。
- 允许您嵌套样式，但目前不支持原生 CSS 嵌套——如果您的样式代码全部是 Sass，这可能对您来说无关紧要。
- 通过 Sass 的
@use命令提供打包功能。 - 通过“compressed”
outputStyle选项执行压缩。 - 提供数学函数、逻辑函数和mixin——其中一些或全部已经是Baseline CSS 的一部分，或者在不久的将来可能会成为Baseline CSS 的一部分。
-
CSS后处理
- 与 Hugo Pipes 配合使用效果很好，但由于 PostCSS 基于 JavaScript，因此比这里描述的其他选项慢得多。
- 使用各种插件来实现以下功能：
- 对旧版浏览器执行转译、polyfill 和浏览器前缀添加。
- 通过插件对 CSS 的
@import命令进行解释来实现打包。 - 执行压缩操作。
-
Lightning CSS 后处理
- 必须“硬塞”进 Hugo 。此外，Lightning CSS没有文件“监视”功能，无法在开发过程中使用，因此这也必须“硬塞”进去。不过公平地说，基于 Rust 的 Lightning CSS 在正确“硬塞”进去之后速度非常快（虽然不如
css.Build或 Dart Sass 快）。 - 对旧版浏览器执行转译、polyfill 和浏览器前缀添加。
- 通过 Lightning CSS 对 CSS 的
@import命令的解释提供打包功能。 - 执行压缩操作。
- 必须“硬塞”进 Hugo 。此外，Lightning CSS没有文件“监视”功能，无法在开发过程中使用，因此这也必须“硬塞”进去。不过公平地说，基于 Rust 的 Lightning CSS 在正确“硬塞”进去之后速度非常快（虽然不如
-
对于我自己访问量不大、非商业性质且风格相对简单的网站，我认为Baseline 2024就足够了；但对于那些访问量较大的网站，尤其是商业网站，可能需要进行额外的后期处理，以兼容较旧或不太常用的浏览器版本。