CSS 不仅仅是一个样式工具。它还决定了网页在浏览器中的呈现方式。优化良好的 CSS 意味着更快的加载时间和更流畅的用户体验。
在当今的数字环境中，网站的性能是其成功的关键因素。编写高效的CSS代码可以极大地影响网页的加载速度，影响从用户体验到搜索引擎排名的方方面面。
本指南深入探讨了有效的策略，以帮助您完善CSS，确保您的网站不仅看起来很棒，而且加载速度快，运行流畅。
CSS 如何影响 Web 性能
当用户访问网页时，浏览器会检索网站的结构 HTML 及其样式 CSS。这是一组关于网页每个部分应该如何外观的详细说明。
如果CSS包含太多信息或过于复杂，就像给浏览器一个需要更长的时间才能解决的难题。这可能会导致用户等待时间更长，这可能很烦人。
这就是简化 CSS 的艺术发挥作用的地方。这不仅仅是整理代码，还要确保浏览器可以更快地准备好网页。
当 CSS 变得更精简、更简单时，就像给浏览器一个清晰、易于理解的地图。这使得网页加载速度更快，使一切感觉更灵敏。
1. 编写更短的 CSS
在编写 CSS 时，使用流行的软件开发原则 Don't Repeat Yourself （DRY）。这提倡代码的简洁明了。
这很重要，因为在实践中，CSS 涉及跨各种选择器的重复属性。目标应该是识别和巩固这些重复属性。通过这样做，您可以消除冗余，从而实现更干净、更易于管理的 CSS。
例如，在下面的代码中，多个元素（和 ）共享相同的字体大小和颜色。h1h2
h1 {
font-size: 20px;
color: #fff;}h2 {
font-size: 20px;
color: #fff;}
CSS 代码
因此，您可以将它们分组到一个公共类下，而不是为每个选择器单独声明这些属性。这不仅简化了样式表，而且使未来的更新更容易，更不容易出错。
您可以将上面的代码重写为如下所示：
h1, h2 {
font-size: 20px;
color: #fff;}
CSS 代码
使用速记属性是最小化 CSS 大小的另一种有效策略，使代码更有效率。它还允许您使用单个声明设置多个相关的 CSS 属性。以下是编写有效速记 CSS 的方法：
当元素的所有边都具有相同的值时，请使用该值。
/* Before shorthand */.same-sides {
padding-top: 15px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 15px;}/* After shorthand */.same-sides {
padding: 15px;}
CSS 代码
当元素的所有边都具有不同的值时，请使用所有四个值。
/* Before shorthand */.different-sides {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 25px;}/* After shorthand */.different-sides {
padding: 10px 20px 15px 25px;}
CSS 代码
当 top/bottom 和 right/left 具有相同的值时，请使用两个值。
/* Before shorthand */.two-sides {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;}/* After shorthand */.two-sides {
padding: 10px 20px;}
CSS 代码
如果只有右/左值相同，但顶部和底部不相同，请使用三个值。
/* Before shorthand */.three-sides {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 15px;
padding-left: 20px;}/* After shorthand */.three-sides {
padding: 10px 20px 15px;}
CSS 代码
2. 使用浅层 CSS 选择器
浅层 CSS 选择器是直接而简洁的选择器，具有较少级别的嵌套元素，不会太深入地挖掘 HTML 结构。
简化选择器可以显著加快网页呈现速度，因为深度嵌套的选择器需要更长的时间供浏览器评估，从而导致页面呈现速度变慢。
考虑以下代码中的示例：将属性值分配给深度嵌套的选择器（如）很麻烦，并且会导致渲染延迟，因为浏览器需要时间来检查每个级别（然后是 header，然后是 nav，然后是 ul 等）以找到正确的 <a> 标签来设置样式）。header nav ul li a
或者，给它一个直接的类是直接的，浏览器可以更快地解释。类选择器通常比嵌套标签更有效，因为浏览器只是查找带有类的元素并应用样式，而不必担心它们在 DOM 树中的位置。.nav-link
/* Less efficient: Deeply nested selector */header nav ul li a {
color: #000;
font-size: 10px;
}/* More efficient: Class selector */.nav-link {
color: #000;
font-size: 10px;}
CSS 代码
3. 段CSS代码
将您的 CSS 代码分割成更小、更集中的片段，例如为不同的网站组件提供单独的文件并创建特定于页面的样式，可以大大提高您网站的性能。这种方法不仅可以更轻松地查找和编辑特定样式，还可以确保网页只加载所需的 CSS，避免不必要的批量。
增强的可维护性和更快的页面加载是最明显的关键优势。较小的 CSS 文件更易于管理，就像一个组织良好的工具箱，其中所有内容都很容易找到。而且，通过只为每个页面加载必要的CSS，浏览器可以减少工作量，从而改善用户体验。
原始 CSS
假设您有一个 CSS 文件，其中包含您网站各个部分的样式：
/* Styles for the home page */.homepage {
background-color: #f0f0f0;
padding: 10px;}/* Styles for the services page */.services {
background-color: #333;
color: white;}/* Styles for the contact page */.contact {
background-color: #222;
color: white;
padding: 20px;}
CSS 代码
分段 CSS
现在，让我们根据其用途将此 CSS 分割成不同的文件：
主页样式（主页.css）：
.homepage {
background-color: #f0f0f0;
padding: 10px;}
CSS 代码
2. Services page Styles (services.css):
.services {
background-color: #333;
color: white;}
CSS code
3. 联系页面样式（contact.css）：
.contact {
background-color: #222;
color: white;
padding: 20px;}
CSS 代码
每个 CSS 文件都集中在网站的特定部分。现在，当用户访问您的网站时，每个页面仅加载所需的 CSS，从而提高网站的性能。
4. 优化 CSS 交付
您可以通过缩小 CSS 来使 CSS 文件更轻、加载速度更快——也就是说，您可以删除多余的空格和行（这称为缩小）。然后，您可以压缩这些文件，以便用户下载它们更小、更快捷。
此外，请确保首先加载您网站最重要的样式，以便人们更快地看到您的页面。其他样式可以在后台加载而不会减慢速度。
您还可以通过在浏览器中保存一些 CSS（这称为缓存）来使访问次数多次的人更快地访问您的网站。这意味着他们不必在每次访问时再次加载。
此外，如果您使用 CDN 或服务器网络，无论您的用户身在何处，您的 CSS 文件都可以存储在世界各地的许多地方，以便更快地加载。
缩小CSS比较 167KB 的未缩小 CSS 文件和 92KB 的缩小 CSS 文件之间文件大小的图形
原始 CSS
/* Main Stylesheet *//* Header Style */header {
background-color: #333;
color: white;
padding: 10px;}/* Navigation Style */nav {
background-color: #444;
margin-top: 10px;}
CSS 代码
上面的CSS代码是可读的，并且有很好的注释，但它包含额外的空格和注释，增加了文件大小。
缩小的 CSS
header{background-color:#333;color:white;padding:10px}nav{background-color:#444;margin-top:10px;}
CSS 代码
缩小版将所有规则合并为一行，删除了不必要的空格和注释，从而减小了文件大小以加快加载速度。
结论
优化您的 CSS 可以加快您的网站速度，从而改善整体用户体验。
通过实现本文中概述的实践，您可以实现性能更高、效率更高且可维护的 CSS。调整几行代码可能带来的性能节省并不显著，但在不同的样式表中，在数百行中，影响将开始显现。
请记住，Web 性能是一个持续的过程。定期审查和完善您的 CSS，以跟上最佳实践和新兴趋势。