为什么大多数 CSS 方法论无法大规模应用

计算机科学中有一句著名的名言：

“计算机科学中只有两件难事：缓存失效和命名。”~ Phil Karlton

“确保 CSS 可伸缩”应该添加到这个列表中。CSS 的可伸缩性是一项极其困难的成就，我们在使用框架或工具时并不总是会考虑到这一点。

随着 CSS-in-JS、CSS 模块以及其他以 Webpack/Node 为中心的解决方案等技术的引入，CSS 的可扩展性已不再是令人头疼的问题。但是，如果您的产品或网站不是使用 React 或 Vue 构建的，该怎么办？如果您仍在 WordPress、Laravel 或定制解决方案等环境中使用 SCSS 或 PostCSS 等预编译技术，该怎么办？

随着项目规模的增长，你需要开始思考 CSS 的扩展以及如何实现。大多数工程师认为，只有当项目规模足够大时，他们才能解决可扩展性问题，但事实上，一个好的可扩展性策略从一开始就需要经过深思熟虑。

我相信大多数人已经知道，CSS 不是一种特别动态的语言，如果不小心，它可能会导致 CSS 样式流失、特殊性问题以及数百行未使用的 CSS 声明。

随着我们的网站变得越来越复杂，可扩展性已成为性能和代码管理的重中之重。如果您是前端开发新手，可能不太了解可扩展性如何影响应用程序，因此，让我们来定义一下：

可扩展性是系统的一种属性，通过向系统添加资源来处理不断增长的工作量。

好吧，这听起来确实有点“计算机科学”味儿。
我们稍微缓和一下：

可扩展……意味着我们构建的代码能够让我们在良好的基础上不断发展。随着应用程序规模的扩大，它不一定会变得更加复杂，而是在发展过程中保留其最佳实践。

这比听起来要困难得多。

当我和同事们交谈时，有一句话总是正确的：

“我们一开始的意图是好的，但几乎一夜之间，我们就感觉代码库变得失控、难以管理”

为了缓解这种情况，一些聪明的人试图通过编写/概念化 CSS“方法论”来控制生产级 CSS 难以驯服的性质。

您可以将方法论视为一组遵循以确保一致性的约定。以下是一些最著名的方法论：

1. BEM：块元素修饰符

http://getbem.com/

...是一种帮助您在前端开发中创建可重用组件和代码共享的方法。

2.RSCSS：CSS样式表结构的合理体系。

https://rscss.io/

...不是一个框架。它只是一套指导你为任何现代网站或应用程序构建可维护 CSS 的思路。

3. SMACSS：可扩展且模块化的 CSS 架构

http://smacss.com/

...是一种检查您的设计过程的方法，也是将那些僵化的框架融入灵活的思维过程的方法。

所有这些方法论都有其优缺点，我不会试图去比较它们。这些方法论背后最重要的原因是它们以一致的方式标准化了 CSS。然而，所有这些方法论都有一个关键因素，无论它们如何规范，似乎都无法做到恰如其分。

无论采用哪种方法，CSS 的可扩展性都主要依赖于工程师对 CSS 工作原理的理解和深入掌握。诸如重要性和特异性之类的基本原则常常被忽视，或者很容易被糟糕的覆盖约定所掩盖，又或者 CSS 的层叠特性尚未得到充分理解。

除此之外，以下是 CSS 以及任何所选方法不能很好扩展的几个原因：

1. 多名具有不同经验的工程师。

考虑到大多数项目都有从初级到领导的各种经验水平，CSS 方法论的解释往往有细微的差别。

这可能会导致代码库中出现大量误解，从而导致组件在扩展时编写略有不同或不正确。这会导致特殊性、重要性和整体代码约定方面的麻烦。

2. 通常缺乏 HTML 方法论。

人们常常忽略了 CSS 方法论中包罗万象的 HTML 基础。HTML 组件的构建方式多种多样，具体取决于工程师及其经验水平。

有些工程师使用类来设置样式，有些工程师使用属性选择器来处理状态，还有些工程师以上都不用。这使得在我们开始考虑扩展 CSS 之前，以一致的方式设置 HTML 组件的样式就成了一个问题。

3. 规则的误解

CSS 方法论中最大的罪魁祸首之一是对概念的误解。我经常看到这种情况，尤其是在代码审查中，工程师们还没有完全掌握方法论的核心。这会导致类名格式错误，或 CSS 结构糟糕，样式混乱，以及范围蔓延。

方法论就像一台运转良好的机器，因此每个组件都需要按照预期的特定方式运行，以便以一致的方式完成其工作。

4. 启蒙

在每个大型项目中，工程师在某个时候都会看到自己的代码，只想放弃整个代码库并重新开始。

当你熟悉了网站的所有功能，并发现一些小的 CSS 声明会给不相关的组件带来意想不到的副作用时，你实际上会开始明白一些事情。我发现这是最令人沮丧的事情。

原因是你开始以全新的视角看待你的 CSS。你会发现哪里出了问题，或者哪些地方没有考虑到，而且事后看来，你更有可能用更少、更“切中要点”的 CSS 重新构建一个更好的产品。

事实上，此时，您开始质疑是否需要完整的 CSS 方法。

结论

本文并非旨在劝阻您使用 CSS 方法论。事实上，我认为它非常有用（如果正确使用）。

话虽如此，在启动项目之前，务必让你的工程团队充分了解你选择的方法。如果整个工程团队都参与其中，你就能体会到规模化带来的好处，而不是陷阱。