毫无疑问，CSS 在网页性能中起着至关重要的作用。 Milica Mihajlija 指出了确切的原因。
当页面存在 CSS 时，无论是内联还是外部样式表，浏览器都会延迟渲染，直到 CSS 被解析。这是因为没有 CSS 的页面通常无法使用。
浏览器必须等到 CSS 被下载和解析后才能显示页面的首次渲染，否则网页浏览将非常卡顿。如果原生网页就是这样的，我们可能会故意用 JavaScript 延迟页面渲染。
那么如何改进它呢？像缓存、缩小和压缩等经典方法是有帮助的。但更重要的是，减少 CSS 的加载量，只加载首次渲染所需的 CSS，其他部分则在首次渲染后加载。
这完全取决于你 如何 以及 加载多少 CSS，与 CSS 的内容关系不大。
CSS 是一种每一位都至关重要的技术，因为在加载和解析它之前，屏幕上实际上什么都不会发生，所以任何优化对于整体用户体验都至关重要。
我想分享一下我如何使用 CSS 类名称命名约定，尽量减少符号的使用 - aa、ab、ac、ad 等。
英文字母有 26 个，我们可以用两个符号得到 676 个名称。
我们可以添加数字和组合，比如 a0、a1、a2，这又可以得到 260 个组合，总共 936 个。
用两个符号可以得到 936 个类名，我还没有提到使用连字符 (-) 和下划线 (_) 符号的可能性。
用三个符号，这种方法可以得到超过 17,500 个类名。
需要注意的是，要避免与 CSS 框架发生冲突 - 例如，Bootstrap 4 使用了两个三个符号的名称 - nav 和 btn。
但我在开发过程中如何使用它们呢？
我在工作 CSS 文件中每个类之上都添加了简短但描述性的行注释，这样就可以将实际的 CSS 数据与描述事物的元数据隔离开来。
我工作中的 CSS 文件有成千上万行代码，就像飞行员的“空客飞行检查清单手册”一样：）。
唯一能描述它们的词是 - 上下文！
只需看一眼，你就能知道你在哪里以及这里发生了什么。
在这种情况下，我从不考虑 jh、fv 或 xr 的含义。
在我的工作流程中，我使用一个文本文件来跟踪它们，其中包含预生成的类名，我一个一个地抓取它们，剪切并使用它们在我的 CSS 文件中，这样我就能始终保持同步，并知道下一个可用的两个或三个符号组合是什么。
总之，我真的希望尽可能多的人能看到、阅读和实施它，因为性能影响是巨大的，让我们下次再考虑使用“人性化且易读”的类名，比如“home-wrapper-column-3-offset”，它比我的解决方案重 14 倍！