本文访谈了 Atomic CSS 的创建者 Thierry Koblentz，深入了解了这款流行 CSS 框架背后的历史和背景。Thierry 现已退休，在大型 CSS 编写方面拥有丰富的经验，曾担任雅虎的前端工程师。
Thierry 因其 2013 年发表在 Smashing Magazine 上的经典文章“挑战 CSS 最佳实践”而被广泛认为将 Atomic CSS 的概念带入了主流。这篇文章为多年来许多流行的 CSS 库铺平了道路。在本访谈中，Thierry 回顾了 Atomic CSS 的历史，并反思了其持续的影响。
Thierry Koblentz：1997 年搬到美国后，我自学了 HTML、CSS 和 JavaScript 作为爱好。
当时，我使用的是 FrontPage，并且严重依赖新闻组来寻求指导。我很快成为 Macromedia 新闻组和 CSS-Discuss 的常客。早期，我支持 Web 标准项目理念，并对无障碍性产生了浓厚的兴趣。多年来，前端对我来说只是一个爱好（我的真正工作是古董商）。我会偶尔创建一个网站，但我主要是在撰写和发表（许多）文章，分享我学习或“发现”的技术。
这为 2007 年雅虎的电话带来了回报，询问我是否可以帮助修复和构建 Yahoo! 网站解决方案 (YSS) 网站构建器模板的样式表。职位描述：没有 HTML，没有 JavaScript，只有 CSS！而且很多！
TK：多年来，我在雅虎的角色发生了很大变化。
我的第一份工作是为 YSS 模板创建样式表（类似于 CSS Zen Garden）。然后，在 YSS “交付”到班加罗尔（印度）之前，我重写了 YSS 网站的标记和样式——我和我的同事被派往那里进行“知识转移”。
顺便说一句，正是更换样式表以创建 YSS 的不同设计的挑战迫使我们找到一个轻量级（非 js）的解决方案来即时调整视频大小；这就是我提出“为视频创建内在比例”的方式。
在 YSS 之后，我有机会只参与从头开始的项目（重写或其他），我越来越多地参与雅虎前端工作。我编辑和创建了许多内部文档（即 CSS 编码标准）；参与招聘流程（就像我的团队中的其他人一样）；领导代码审查会议；开设 CSS 课程和研讨会；在 FED London 发表演讲；帮助其他团队处理 HTML/CSS/无障碍性问题；参与技术采用方面的决策（例如 Bootstrap 或非 Bootstrap）；创建库；审查内部论文；撰写提案；等等。
另一个补充说明，在我雅虎的八年时间里，我可能写不到 100 行 JavaScript 代码。如果我没有辞职或被解雇，这要感谢 Lingyan Zhu 和 Renato Iwashima；他们在设置我的环境或处理命令行方面不知疲倦地帮助了我（因为直到今天，我仍然很糟糕）。
TK：在早期，既没有库也没有已发布的方法；那是蛮荒的西部，一切都可以：“非语义”类、ID、CSS hack、条件注释、框架、CSS 表达式、“JS 探测”、主要针对 Internet Explorer 进行设计等等。在我的旧网站上，我甚至有这样的评论：
<code></code>
一切都是公平竞争，一切都被滥用，因为我们只有一套非常有限的工具，却需要做很多事情。
但是，当我加入雅虎时，情况发生了巨大的变化。来自英国的开发人员是 Web 标准的坚定支持者，我感谢他们极大地影响了雅虎的 HTML 和 CSS 的编写方式。语义标记是一个现实，CSS 是按照关注点分离 (SoC) 原则编写的“T”（尽管有时对我来说过于热衷）。
YUI 有 CSS 组件，但还没有 CSS 框架。有一个内部 CSS 库（称为 Lego），但我从未使用过它。OOCSS、SMACSS、ECSS（向 Ben 致敬）、BEM、Bootstrap、Pure 等方法和库不久之后就会出现。
TK: 在 YSS 迁移到印度之前，我的经理 Michael Montesano 询问是否有办法让班加罗尔的团队避免编辑样式表，从而降低损坏的风险。我想 YSS 模板的经验（付费客户抱怨页面损坏）让他在对样式表进行任何更改时都非常偏执。
因此，我本着我的 ez-css 库的精神创建了一个“实用程序表”——一个旨在让开发人员实现其样式而无需编辑或在样式表中添加规则的表。
几年后，时任工程总监的 Michael 询问我是否可以使用仅实用程序类重新设计雅虎的主页，因为他知道，我们再次不会负责网站维护。我们讨论了优先考虑实用程序类而不是语义类，我认为当时这种程度的事情并不存在。这是一个非常大胆的举动。
这项大规模的练习很快成为一项概念验证，展示了通过标记进行样式设置带来的许多好处。它检查了如此多的框，以至于我们决定使用该“静态”样式表（称为 Stencil）来重新设计 Yahoo! 我的主页产品。
TK：我们的 Stencil 库是静态的，这是一个强制执行设计风格的绝佳工具——我们认为雅虎即将在其所有属性中采用这种风格。我们很快意识到这不会发生。每个雅虎设计团队对完美的字体大小、完美的边距等都有自己的看法，我们不断收到添加非常具体的样式到库中的请求。
这种情况是无法维护的，因此我们决定开发一个工具，让开发人员能够即时创建自己的样式，同时尊重创作方法的原子特性。这就是 Atomizer 的诞生方式。我们停止了添加样式——CSS 声明——而是专注于创建丰富的词汇表，为开发人员提供广泛的样式，例如媒体查询、后代选择器和伪类等等。
使用 ACSS，开发人员可以自由使用任何他们想要的东西；因此，团队能够在使用完全相同的库的同时采用不同的设计样式和样式指南。并且有一些对开发人员过去习惯的样式编写方式来说是新的直接好处。他们不再需要担心他们的样式会破坏页面，也不需要担心编写选择器来为他们的组件设置样式。
ACSS 最初是为解决雅虎的问题并在雅虎的环境中工作而构建的。
参与 Atomic CSS 的人员包括 Renato Iwashima、Steve Carlson 和我自己。Renato 和 Steve 创建了 Atomizer。
TK：当我 2007 年加入雅虎时，我很快了解到代码库可能有多么庞大。有跨许多地点/时区的团队；无数的产品；数百个共享组件；第三方代码；A/B 测试策略；作为一项要求的扩展；不同的脚本方向；本地化和国际化；各种发布周期；复杂的部署机制；大量的指标；各种遗产；严格的编码标准；构建流程；政治；以及更多政治；等等。
其中大部分对我来说都是全新的，我必须学习它是否以及如何影响我编写 CSS 的方式。我开始重新审视和挑战我所有的信念，因为许多对我来说是常用做法的技术或方法似乎不适合，或者至少对复杂的应用程序适得其反。
一项“现实检查”与样式抽象有关。我们都读过文章说，将 M-10 类映射到 margin: 10px 不是一个好主意，因为它意味着要同时编辑 HTML 和 CSS才能更改样式。不幸的是，这就是大型/复杂项目中发生的情况：
为了预测这样的问题，需要了解设计师在其请求背后的意图：选择的样式是因为其抽象，例如颜色 primary，还是因为其特定值，例如在我们的 M-3x 案例中的 15 像素边距？如果存在样式指南来强制执行设计原则，那么像 M-3x 这样的类可能没问题，但是如果设计团队可以请求他们想要的任何样式，那么最好避免使用会导致模糊样式的命名约定。根据我的经验，任何模棱两可的事情都会导致损坏。
依赖文档或组件的结构来进行样式设置——通过组合器如 > 或 ——听起来像是编写样式表的一种简洁方法，但它忽略了一个事实，即在复杂的环境中，不能假设任何特定的标记或结构是不可变的。
你认为 z-index 很复杂吗？当你甚至不拥有你的组件所在的堆栈范围时，再想想看。这是大型项目中需要解决的最复杂问题之一，在大型项目中，团队负责页面的不同部分。我曾经写过一篇关于这方面的提案。
限定选择器——例如 input.required 与 .input.required——看起来不错且具有语义，但它会创建不必要的特异性级别——例如 0.1.1 与 0.2.0——并阻止标记更改；通过确保不限定选择器，很容易避免这两件事。
依赖通配符选择器 * 来设置全局范围的样式？在一个非常大的项目中，这可能意味着你正在设置其他人的组件的样式。除非你了解他们的需求，否则不要为他人做出样式决策。
我相信你读过 ID 不好，特异性很糟糕，但是。事实上。高特异性不如你的规则创建的特异性级别数量那么成问题。在一个只有两三个级别存在的环境中进行样式设置要容易得多——例如 1.1.0、0.1.0、0.2.0——而不是在一个特异性相当低但遵循“自由竞争”方法的环境中——例如 0.1.0、0.1.1、0.2.0、0.2.1、0.2.2 等——这通常作为大型项目中的防御机制出现，作为“沙盒”样式的一种手段。
盲目遵循 CSS 社区的建议可能会导致令人不快的意外。永远不要采用尚未经过实战检验的新技术。还记得 will-change 吗？并且始终了解你使用的每种样式的作用或可能触发的作用。例如，position 可以创建一个堆叠上下文和一个包含块，而 overflow 可以创建一个块格式化上下文。
根据我的经验，深入了解 CSS 对于大型组织高效编写 CSS 来说还不够。在我雅虎任职期间，我经常发现自己与几年前曾经与我一致的人们相矛盾。环境非常残酷，需要非常务实才能避免许多陷阱。下次你查看大型项目的源代码并看到一些对你来说毫无意义的东西时，请记住 Nicholas Zakas 的这条推文：
不要假设人们是愚蠢的、无知的、犯了错误，假设他们是聪明的、尽力而为的，而你缺乏背景。
— Nicholas C. Zakas (@slicknet) 2013 年 2 月 10 日
TK：我们的我的主页团队很好地接受了 ACSS，但在外部却进展不顺利。我们第一次互动是与位于圣莫尼卡的体育团队。Steve 和我在一次电话会议上试图说服开发人员，不遵循关注点分离原则才是正确的做法，并且不会造成混乱。
我们向他们指出了 Nicolas Gallagher 最近写的一篇文章，认为来自“外部人士”的文章会有所帮助，但不行！事情进展不顺利，摩擦很多。主要问题是该库是由实用程序类组成的，但其语法并没有帮助缓解对话。
我还记得与邮件团队会面，他们并没有反对 Atomic CSS 的想法，但希望提出他们自己的 JavaScript 方法来使用“普通”CSS 声明——因为他们无法忍受 ACSS 语法。无论如何，支持该库的数据（约减少 36% 的 CSS 和 HTML）本身就说明了一切，因此最终采用了 ACSS。而今天，七年多后，雅虎主页、雅虎体育、雅虎新闻、雅虎财经和其他雅虎产品仍在使用 ACSS。
为了更好地理解像 ACSS 这样的方法如何使组件可重用性至关重要的项目受益，请从雅虎财经复制组件的标记，并将其粘贴到雅虎新闻中。该组件应该看起来像是属于该页面的一部分。这是因为 ACSS 使这些组件与页面无关。
TK：我们已经通过多次迭代确定了两组用作属性值分隔符的“候选者”：圆括号 () 和方括号 []。
Renato 回忆说，我们选择圆括号而不是方括号是因为熟悉 JavaScript 中的函数，即使是以牺牲额外的 Shift 键击为代价。ACSS 语法旨在：
它看起来像这样：
<code>[<context>[:<pseudo-class>]<combinator>][(<value>,<value>?,...)][][:<pseudo-class>][::<pseudo-element>][--<breakpoint_identifier>]</breakpoint_identifier></pseudo-element></pseudo-class></value></value></combinator></pseudo-class></context></code>
开发人员按照上述结构构建他们的类。核心语法基于流行的工具包 Emmet。我们采用了 Emmet 方法来减少特性，因为核心类是显式的属性/值对，而不是任意字符串。
我们还创建了十几种辅助类。这些应用多个样式声明，并且要么是快捷方式，例如隐藏有视力障碍的用户的内容，要么是 hack，例如使用 .Cf 进行 clearfix。我们还通过使用配置文件为开发人员提供了更多自由度，在配置文件中他们可以创建变量——例如 .PrimaryColor——断点等等。
从未使用过 ACSS 的人会告诉你，语法太奇怪了（充其量），但熟悉它的人会告诉你它在很多方面都很巧妙。
TK：我之前在各种在线出版物上写过很多文章，所以写一篇关于这种“挑战性”方法的文章是很自然的。
雅虎在 2013 年 10 月赞助了一场前端会议，Renato 在会上安排了一次演讲来介绍我们的解决方案，我试图在那之前发表这篇文章。我选择不将其发布在 Yahoo! 开发者网络上，因为该网站没有提供评论部分。A List Apart 无法及时发布它，但 Smashing Magazine 加快了其审查流程，以便能够在 10 月底之前发布这篇文章。
我选择一个有评论部分的出版商的做法得到了回报，因为这篇文章收到了 200 多条评论，这对我来说非常耗时——而且令人沮丧——我不得不回复这些评论。
TK：当文章发表时，我告诉 Vitaly [Friedman，Smashing Magazine 联合创始人]，那张便条听起来像某种免责声明；这会影响人们阅读文章的方式。但我并没有真正反驳，因为我理解 Vitaly 的想法。我确实觉得这张便条仍然存在很有趣，现在这种方法已经成为主流了。
TK：总有改进的空间，尤其是在你开创了这个解决方案之后。你不能去看别人做了什么来学习他们的错误或缺点。你没有改进的材料。因此，如果我们认为我们第一次就成功了，那将是自负的。
在 Atomic CSS 方面，我们拥有丰富的经验，因为我们在大型项目中使用了“静态”样式表一年多。但在动态方面——工具方面——我们好像找不到多少灵感。记住，其他库花了六年时间才效仿。
用法语来说，我们说：essuyer les plâtres。（擦拭灰尘）
我们犯的一个错误是使用“Atomic CSS”作为 acss.io 的标题，因为正如 John Polacek 指出的那样，这造成了一些混淆。从那时起，我们就更改了该标题。
我唯一后悔的是社区多年来是如何对待 Atomic CSS/ACSS 的，这最近导致了一次奇怪的交流，有人向我解释了“Atomic CSS”的含义：
Atomic CSS 库 [ACSS] 使用了这个名称，但我认为这具有误导性，因为你正在谈论的功能是动态样式生成。“Atomic CSS”作为一个通用术语，将小的选择器指定为原子，但它们是静态的。
谈论被抹去。;)
非常感谢 Thierry 参加这次采访，并允许我们将其发布给社区。
以上是原子CSS的制作：对Thierry Koblentz的采访的详细内容。更多信息请关注PHP中文网其他相关文章！
