[译] [040] 前言

[cssmagic]

---

本文是早期译版，未经校审。仅供参考。

---

Preface

前言

In the past few years, CSS has undergone a transformation, similar to the JavaScript revolution circa 2004. It went from being a dead-simple styling language with limited power, to a complex technology defined by over 80 W3C specifications (including drafts), with its own developer ecosystem, its own conferences, and its own frameworks and tooling. CSS has grown so much that it’s practically impossible for any single person to hold all of it in their brain. Even in the W3C CSS Working Group that defines the language, nobody is an expert on every single aspect of CSS--and few even come close. Instead, most WG members focus on certain CSS specifications and might know very little about others.

在过去的几年里，CSS 经历了一场巨变，正如 JavaScript 在 2004 年前后所经历的那场革命。它从一门极度简单、功能有限的样式语言，发展成为一项由 80 多项 W3C 规范（含草案）所定义的复杂技术，并建立起了独有的开发者生态圈、专属的技术会议、专用的框架和工具链。**CSS 已经如此壮大，以致于一个普通人已经无法把它完整地装进自己的头脑了。**甚至在 W3C 专门定义这门语言的工作组中，也没人敢说自己是精通 CSS 所有方面的专家——甚至连接近这个程度都非常困难。实际上，大多数工作组成员只专注在 CSS 的某个特定细节中，而可能对其他部分知之甚少。

Up until roughly 2009, CSS expertise was not defined by how well the language was known. This was more or less a given for any serious CSS work. Instead, CSS prowess was defined by the number of browser bugs and workarounds that had been committed to memory. Fast-forward to 2015, and browsers are now designed to support standards, and flimsy browser-specific hacks are frowned upon. There are still some unavoidable incompatibilities, but--especially because most browsers now auto-update--the pace of change is so fast, that attempting to document them in a book would be a waste of time and space.

大约在 2009 年以前，评判一个人的 CSS 专业程度并不是看他对这门语言的了解有多深。对当时的 CSS 行业来说，这或多或少就是现实。一个人是否能称得上 CSS 高手，往往要看他能记住多少个浏览器 bug 和相应的对策。时间一转眼就到了 2015 年，现在的浏览器都是以 Web 标准作为设计基准的，过去那些脆弱的针对特定浏览器的 hack 早已风光不再。当然，某些不兼容的情况仍然无法避免，但是——尤其是现在的浏览器几乎都已经实现自动更新了——迭代速度已经非常之快，把这些不兼容的情况记到纸上完全是在浪费时间和空间。

The challenge in modern CSS has little to do with working around transient browser bugs. The challenge now is using the CSS features we have in a creative way, in order to come up with DRY, maintainable, flexible, lightweight, and as much as possible, standards-compliant solutions. This is exactly what this book is all about.

我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug 了。如今的挑战是，如何在保证 DRY、可维护、可扩展、轻量级并且尽可能符合标准的前提下，把我们手中的这些 CSS 特性转化为网页中的各种创意。这正是这本书将要呈现的内容。

{原书注释}

DRY is an acronym that stands for “Don’t Repeat Yourself.” It’s a popular programming mantra to promote an aspect of maintainable code: being able to change its parameters with as few edits as possible, ideally one. Emphasis on DRY CSS code is a recurring theme in this book. The opposite of DRY is WET, which stands for “We Enjoy Typing” or “Write Everything Twice.”

DRY 是一个首字母缩写（原文 “Don’t Repeat Yourself”），意思是你不应该重复你已经做过的事。它是一种广为流传的编程理念，旨在提升代码某方面的可维护性：在改变某个参数时，尽量做到只需要改极少的几处地方，最好是一处。强调 CSS 代码的 DRY 原则将是一个贯穿本书的主题。DRY 的反面是 WET，它的意思是 “We Enjoy Typing”（我们喜欢敲键盘）或 “Write Everything Twice”（同样代码写两处）。

There are many books out there that document certain CSS features from A to Z. CSS Secrets, for better or for worse, is not one of them. Its purpose is to fill the knowledge gaps that are left after you’ve already familiarized yourself with the reference material--to open your mind to new ways to take advantage of the features you already know about, or to let you know about useful CSS features that aren’t as shiny and popular, and that deserve more love. However, above all, the main purpose of this book is to teach you how to solve problems with CSS.

市面上有很多书，其内容就是以字母顺序记载一些 CSS 特性。不管怎样，你手里的这本《{$BOOK_NAME$}》不是那种书。这本书的目的在于，当你已经熟悉了那些参考书的内容之后，帮你填补知识断档——它会让你的头脑接触各种全新的方法，充分发挥那些你已经熟悉的特性所具备的无穷威力；同时也让你明白，某些你不熟悉而且看似不起眼的 CSS 特性可能同样威力无比、不可小觑。不过，总的来说，这本书最核心的目的是教你如何用 CSS 解决难题。

CSS Secrets is not a cookbook either. Each “secret” is not a canned recipe, with rigid steps you must follow to achieve a specific effect. Instead, I’ve tried to describe the thinking behind every technique in detail, as I believe that understanding the process of finding a solution is far more valuable than the solution itself. Even if you don’t think that a certain technique is relevant to your work, learning how to reach a solution might still prove valuable for tackling even completely different problems. Long story short, you will hopefully get many proverbial fish from this book, but its main goal is to “feed you for a lifetime,” by teaching you how to catch them.

《{$BOOK_NAME$}》也不是一本 “菜谱书”（cookbook）。每篇 “攻略” 并不是即开即用的菜谱——死板地套用某些步骤就可以达成某个特定的效果。实际上我努力把每个技巧背后的思考都尽量细致地描述出来，因为我相信，发现解决方案的过程比这个解决方案本身要有用得多。即使你认为某项技巧跟你的工作没有直接关联，学会如何摸索并得出解决方案仍然是有价值的，哪怕你面对的是一个完全不同的问题。长话短说，这本书不仅授之以 “鱼”，而且授之以 “渔”，让你一辈子不会为 “没鱼吃” 发愁。

[yisibl]

解决难道

解决难题。

[cssmagic]

👍 谢谢指正。已修正。

[photino]

在 2014 至 2015 年间，Google 通过其 Gmail 和 Google Maps 等 Web 富应用产品提出了 Ajax 概念，
掀起了 Web App 的热潮。

年份是不是有问题？

[Leopoldthecoder]

在 2014 至 2015 年间，Google 通过其 Gmail 和 Google Maps 等 Web 富应用产品提出了 Ajax 概念

应该是2004至2005年吧

[cssmagic]

@photino @Leopoldthecoder
👍 谢谢提示。已修正。

[llh911001]

过去那些脆弱的针对特定浏览器的 hack 早已风光不在

应为“风光不再”

[cssmagic]

@llh911001
👍 谢谢指正，已修正。

虽然搜索引擎表示 “风光不在” 的使用更多，但我查证了一下确实应该是 “风光不再”。

[cssmagic]

@crafteverywhere

一点不重要的小建议：DRY 那段里的“同样代码写两处”改成“同样代码写两遍”似乎更上口。因为和“我们喜欢敲键盘”押韵。:smile:

谢谢建议。这里我认为 “两处” 比 “两遍” 更准确，因为后面的《CSS 编码技巧》一直在强调，要减少样式变动时所需要修改的地方。

后来编辑老师在审校时把 “两处” 改成了 “两次”（“twice” 的直译）。如果可以选择的话，我还是会坚持 “两处”。