被嫌弃的CSS的一生

本文译者系360奇舞团前端开发工程师  闫俊启

文章标题：被嫌弃的CSS的一生

原文标题：The modern web’s underrated powerhouse

原文链接：https://github.com/readme/featured/css-future

CSS是互联网最重要的组成部分之一，但却未得到足够重视。

您当前浏览到的这个网页。链接、页眉和分段符都是用 HTML 标记的。但CSS才真正定义了它的外观和感觉：颜色、字体、列宽、各种方框和元素的位置。如果您在移动设备上看这个页面，CSS 会让它在更小的屏幕上看起来更合适。

在招聘信息、课程和技术讨论之类的相关领域，JavaScript 及其庞大的工具和框架生态系统赢得了绝大部分关注。但 CSS 是前端和全栈开发者的核心技能，CSS 生态系统在塑造现代网络使用体验方面发挥着至关重要的作用，但这一作用往往被低估。CSS 不仅有助于定义页面的外观，还有助于定义页面如何适应不同的尺寸和上下文。它是网络可用性和可访问性的基础。

虽然 CSS 并不像 JavaScript 那样是一种成熟的编程语言，但它的功能却非常强大。看看设计师、前端开发员兼艺术家林恩-费舍尔（Lynn Fisher）的网站 A Single Div(https://a.singlediv.com)（她只用 CSS 就绘制出了复杂的插图），或者看看她的旧作品集网站(https://lynnandtonic.com/archive/2021/)，当您调整它的大小时，它就会发生巨大的变化。

CSS 曾经是一种相当有限和受限制的网页样式设计方法，但由于其周围的专业社区，它已成为一种适应性极强的网络应用程序设计系统。长期以来，Fisher 等开发者(https://devsnap.me/css-animation-examples)不断挑战 CSS 的极限。与此同时，开源生态系统也精心设计了各种工具，以应对常见挑战并扩展该语言的能力。现代 CSS 是二十多年实验和实践的结晶，它将继续发展，以满足网络和移动开发者不断变化的需求。

挫折岁月

花时间深入学习 CSS 的设计人员和开发者发现，使用这种语言是一种乐趣：在 2021 年的 CSS 状态调查(https://2021.stateofcss.com/en-us/opinions/)中，近 80% 的受访者表示喜欢编写 CSS；而在 2022 年(https://2022.stateofcss.com/en-US/)，只有 3.3% 的受访者表示对 CSS 不满意或非常不满意。当然，这其中存在一定的选择偏差：选择回答这项调查的用户可能更倾向于将编写 CSS 作为职业的一部分。但这也反映出 CSS 多年来是如何从一项常常令人沮丧的年轻技术发展成为现代网络开发中成熟稳健的基石的。

很明显，当时我们用来设计网页的大多数 CSS 功能都不是为此目的而设计的。

在互联网早期，开发者和设计师几乎没有办法为页面设计样式。设计师无法指定网页应该使用什么字体，甚至无法指定背景色。这些决定通常都是在浏览器端做出的。蒂姆-伯纳斯-李（Tim Berners-Lee）的第一版 HTML(https://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html) 甚至没有包含粗体或斜体标签，尽管这些标签很快就出现(https://www.w3.org/MarkUp/HTMLPlus/htmlplus_15.html)了。因此，用户看到的所有网页几乎都是一样的--例如，NCSA 的 Mosaic 浏览器默认为灰底黑字，链接为蓝色。

能否赋予开发者指定样式的能力--颇具争议。

"CSS的作者之一--哈康·维姆·李（Håkon Wium Lie(https://www.wiumlie.no/2006/phd/ )）在2005年的博士论文中回忆说："网络用户要求对Document的表现形式有更多的掌控能力，并且十分期待这一新特性，但社区中也有一些抵触情绪。

其他的比如网景公司创始人马克-安德森（Marc Andreessen），则主张(http://1997.webhistory.org/www.lists/www-talk.1994q1/0683.html)将表现形式纳入 HTML，而不是通过一种单独的语言来定义。于是涌现出了很多种建议，不同的浏览器厂商也实施了不同的解决方案。例如，Netscape 增加了对新的、非标准 HTML 标签(https://www.antipope.org/charlie/old/attic/webbook/ch2html/html-ch1h.html)的支持，让开发者对网页的表现形式有更多的控制权。

Wium Lie 写道，CSS 的一个主要目标是 "在读者和作者的需求和愿望之间进行协商"。CSS 使最终用户和开发者都能定义样式，并由浏览器解决两者之间的差异，从而在两者之间达成了妥协。CSS 中的 "层叠(https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade)"一词就是指处理多种可能相互冲突的样式。虽然现在主要是由网站而不是用户来定义表现形式，但现在的浏览器仍然通常使用样式表来设置默认字体和其他表现元素，用户可以安装浏览器扩展来覆盖网站的样式表，从而定制自己的外观和感觉。

CSS 规范的第一版(https://www.w3.org/TR/REC-CSS1/#:~:text=CSS1%20is%20a%20simple%20style,in%20common%20desktop%20publishing%20terminology.)于 1996 年发布，但采用速度很慢。浏览器零敲碎打地添加 CSS 功能，导致开发者的体验支离破碎，因为不同的浏览器会根据其支持的 CSS 功能，以不同的方式呈现相同的 CSS 代码。

本世纪初，随着浏览器支持范围的扩大，开发者不断挑战 CSS 的极限，创造出复杂的杂志风格布局。开发者兼网络历史学家杰伊-霍夫曼（Jay Hoffman）指出(https://thehistoryoftheweb.com/the-rise-of-css/)，2002 年 ESPN 网站的重新设计是 CSS 语言的转折点。另一个里程碑是 2005 年 CSS garden(http://www.csszengarden.com/)的推出。这个由戴夫-谢伊（Dave Shea(https://github.com/mezzoblue)）策划的网站展示了 CSS 的强大功能，只需改变 CSS，而不是底层的 HTML，就能从根本上改变页面的外观和布局。

但创建复杂的布局并不一定是 CSS 的目的。CSS 年度调查（https://2022.stateofcss.com/en-US/）"组织者萨沙-格雷夫（Sacha Greif）说："很明显，当时我们用于设计网页的大多数 CSS 功能都不是为此目的而创建的。浮动（Floats）是本世纪初用于 CSS 布局的主要工具之一，主要用于文字包装和其他相对简单的定位目的。开发者不得不使用巧妙的黑客手段和变通方法，有时甚至利用漏洞来 "欺骗 "浏览器显示他们想要的布局，比如将边距设置为负数，让元素出现在正确的位置。即使是将元素垂直居中这样看似简单的操作，也不像看起来那么简单(https://vanseodesign.com/css/vertical-centering/)。然而，这些 "标签外 "的使用可能会让许多人在使用 CSS 时感到沮丧，并激发了许多备忘录的灵感(https://css-tricks.com/css-is-awesome/)--比如那些在方框边界外流动着 "CSS 棒极了 "文字的咖啡杯。CSS 的学习曲线非常陡峭，许多网络开发者只能靠蛮力来让网站看起来符合他们的要求。由于不同的浏览器支持 CSS 规范的不同部分，开发者还必须找到变通方法，使他们的 CSS 代码与所有主流浏览器兼容。这些因素加在一起，使 CSS 在诞生初期被认为是一种困难且不合作的技术，从而阻碍了它的应用。

"21 世纪初，我使用 CSS 重新设计了我雇主的网站，"W3C CSS 工作组成员、开发者 Miriam Suzanne 说。"他们最后拒绝了，因为他们认为 CSS 当时还没有准备好。

尽管如此，许多开发者还是被 CSS 所吸引。"GitHub 首席设计与品牌架构师、Bootstrap CSS 框架(https://github.com/twbs/bootstrap)的共同创建者马克-奥托（Mark Otto(https://github.com/mdo)）说："CSS 总是让我一见倾心。"我喜欢它的声明性。即使是怪癖也让我想学。那真是一段令人兴奋的时光。

CSS 的可视化特性也吸引了许多新手开发者。"我发现 CSS 真的很平易近人，"费舍尔说，她在 2000 年代初通过编辑 LiveJournal 模板起家。"您可以在代码编辑器中修改一些内容，然后看到修改几乎立即反映在您的网站上。这是一种可视化的学习方式。她还指出，LiveJournal 上出现的临时开源 CSS 社区也是一种重要资源。"她说："人们分享他们的代码片段，并解释他们是如何做的。"她说："这并不可怕，LJ 上的每个人都在这么做。

开源

2000 年代后期，CSS 的一系列发展不仅为 CSS 开发者带来了便利，也为 CSS 日后的改进铺平了道路。

从 21 世纪开始，网络标准项目组织开始发布一系列兼容性测试，以衡量不同网络浏览器的标准兼容程度。2009 年发布的 Internet Explorer 8 是第一个通过 Acid2 标准测试(https://en.wikipedia.org/wiki/Acid2)的IE 版本(https://www.zdnet.com/article/internal-microsoft-ie-8-build-passes-the-acid-standards-test/)。这也是 Internet Explorer 首次能够与当时其他主要的桌面浏览器实现可接受的功能均等。虽然开发者在未来几年中仍需继续支持旧版本的浏览器，而且移动浏览器的兴起也带来了新的挑战，但这标志着在标准遵从性方面的一个重要里程碑，使开发者更容易编写在现代浏览器中工作方式大致相同的 CSS 代码。

与此同时，为了让 CSS 开发者的工作更轻松，开源工具生态系统应运而生。其中最重要的工具之一就是汉普顿-卡特林（Hampton Catlin）于 2006 年首次推出的 "Syntactically awesome style sheets"（Sass(https://github.com/sass/sass)）预处理语言。Sass 为前端开发者提供了大量功能，使他们能以更程序化的方式处理 CSS，例如嵌套类可以更方便地将相关 CSS 代码组合在一起，而变量则可以简单地定义一次属性（例如背景颜色），然后在整个项目中使用。

开发者可将 Sass 代码编译成符合标准的 CSS 代码，供网站使用。这听起来似乎很复杂，但实际上它让大型 CSS 项目的工作变得不再那么复杂。"费舍尔说："Sass问世初期，我在一家公司工作，当时有很多强烈的意见。"能够更轻松地导入和组合不同的 CSS 文件，让我们不必在一个巨大的文件中工作，这一点让我们倾向于'是'。

Sass 很快被其他 CSS 处理语言加入，如Less(https://github.com/less/less.js/)（"Leaner Style Sheets "的缩写）和 PostCSS(https://github.com/postcss/postcss)。与此同时，框架让开发者能够花更少的时间来摆弄不同的页面元素，使其正确排列，或让填充在不同的浏览器中正常工作。Bootstrap 是最早获得广泛用户基础的框架之一，由 Otto 和 Jacob Thornton 于 2011 年发布。

其基本理念是提供一套符合公司风格指南的预置设计组件--今天我们称之为设计系统(https://css-tricks.com/design-systems-building-future/ 'Design Systems')。"Otto解释说："这是一种让东西'Twitter化'的简单方法。"当时公司里很少有人对 CSS 有扎实的了解。我想为大家提供一种方法，在不过度消耗自己精力的情况下更快地构建东西。"

随着 Twitter 内部对 Bootstrap 的采用，Otto 意识到该框架在公司外部也很有用，因为它内置了许多兼容性变通方法，还包括预定义布局，开发者可以对其进行定制，而不用从头开始编写。Bootstrap 在 Twitter 之外的应用同样迅速。

许多其他开源框架也接踵而至。根据 CSS 现状调查，目前最流行的是 Tailwind(https://github.com/tailwindlabs/tailwindcss)。创建者亚当-瓦森（Adam Wathan(https://github.com/adamwathan)）说，这个项目的目标是在不使用普通 CSS 和使用 Bootstrap 这样更有主见的框架之间找到一个平衡点。但在这样做的过程中，它最终挑战了一些关于如何最好地编写 CSS 的流行观点。

正如 CSS Zen Gardens 网站所展示的那样，传统上，我们鼓励将 CSS 与 HTML 严格分开，CSS 通常与 HTML 标记分隔在不同的文件中。而 Tailwind 则让开发者在 HTML 中指定样式。将两者分开的原因是为了更容易修改其中一个而不影响另一个。但 Wathan 认为，实际情况并非如此。"他说："HTML/CSS 中从未真正实现过关注点分离。他说："您必须参照 HTML 的底层结构来编写 CSS，而实际上，当您修改 HTML 时，您必须修改 CSS，反之亦然。人们正试图做一些从未真正成功过的事情，而且成本很高。

Tailwind 的方法起初备受争议，但它一跃成为 CSS 状态调查排行榜的榜首，证明了多种不同的 CSS 方法都有存在的空间。

State of CSS

这些为改善 CSS 开发者体验所做的努力有助于不断发展的 CSS 规范本身的形成。

像 Bootstrap 这样的工具帮助证明了在 CSS 中布局可以变得多么简单，验证了过去 10 年中最重要的两个 CSS 功能背后的理念：Flexbox 和 Grid。这两项功能可以帮助开发者创建适应不同屏幕大小和尺寸的响应式布局，而无需借助黑客手段或变通方法，从而帮助减轻 CSS 开发者的一些最大痛点。"Greif说："今天，您可能不喜欢某个CSS功能的工作方式，但至少该功能是为您试图实现的特定任务而设计的工具。"每次需要居中时，您都要翻阅博客文章和 Stack Overflow 的答案，而只需阅读 CSS Grid 或 Flexbox 的文档，这两者之间的差别很大。

CSS 变得越来越智能，能更好地根据一组参数调整页面以适应不同场景，而不再需要大量指令。

其他功能则更直接地受到开源生态系统的启发。CSS 现在支持变量（在 CSS 中被称为 "自定义属性"），并将很快原生支持嵌套规则--这是 Sass 首创的两个理念。"苏珊娜既是 Sass 的核心贡献者，也是 W3C 工作组的成员。"Sass 可以比万维网联盟走得更快。我们可以试验和验证那些日后可能成为正式 CSS 功能的想法。

然而，CSS 标准中网格布局或变量等功能的工作方式与 Bootstrap、Sass 和其他率先使用这些功能的第三方工具的工作方式大相径庭。"我们不能直接从 Bootstrap 或 Sass 等第三方工具中复制功能，"麻省理工学院计算机科学家兼讲师 Lea Verou(https://github.com/LeaVerou) 解释说，他曾与他人合作撰写了多个 CSS 规范，现在是 W3C 技术架构组成员。"我们在设计规范时有不同的限制，尤其是在性能方面。我们与包括浏览器制造商在内的社区密切合作，以平衡新功能中所有潜在的权衡。

"苏珊娜补充说："CSS 必须在每一个屏幕上都能工作，甚至在没有屏幕的地方也能工作，比如屏幕阅读器或智能扬声器。

另一项备受期待的新功能是 "容器查询(https://www.w3.org/TR/css-contain-3/)"，它使 CSS 布局的适应性更强。网格和 Flexbox 等工具已经让根据屏幕大小调整元素大小变得更加容易。苏珊娜正在开发的 "容器查询 "允许您根据元素容器的大小，而不是屏幕的大小，为元素应用样式。例如，您可以根据一列的宽度使用不同的字体大小。

与此同时，Verou 也在最终确定 CSS 中处理颜色的最新规范。其中一项主要的新功能是 "相对颜色语法"，它能让您在任何颜色空间中，将一种颜色定义为另一种颜色成分的计算结果。"Verou解释说："例如，如果您想让某些文字的颜色在鼠标移过时变得更深，传统上您必须指定您希望它变为的颜色。Verou 解释说，"如果您想改变原始文本的颜色，还必须手动更新深色。现在，开发者只需指定他们希望在不同情况下颜色变浅或变深的程度即可。"能够表达这种关系意味着，每次您改变 A，B 就会自动适应，无需您的干预。这基本上就是'不要重复自己(DRY)(https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)'的软件工程原则。" 这些新功能中的许多功能都在推动 CSS 更好地适应不同的环境。"费舍尔说："从历史上看，CSS 是一种非常精确的语言。"您可以指定事物的精确外观和位置。现在，CSS 变得越来越智能，能够更好地根据一组参数调整页面以适应不同的场景，而不再需要大量的指令。"

"苏珊娜说："它更多地是给计算机提供一组约束条件，然后让计算机根据这些约束条件决定如何对元素进行样式调整。

Verou 强调说，任何人都可以为 CSS 的未来做出贡献。"她解释说："我在 2010 年加入了 W3C 的 CSS 规范邮件列表，并开始分享我的想法，最终我被邀请加入 CSS 工作组。"如今，我们在 GitHub 而不是邮件列表上开展工作。

她说，参与其中的最佳方式是开始阅读现有的提案，了解为什么要添加或不添加不同的功能。"她说："并不是每一个想法都能得到响应。"但任何人都可以参与其中。

- END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。