If you fell into a coma in 2005 and woke up today (yikes), what would you need to learn to catch up with modern CSS?

如果您在2005年陷入昏迷并且今天醒来(喜欢)，那么您需要学习什么才能赶上现代CSS？

The first stop would have to be flexbox and grid — arguably the most important new features of the language. Well-implemented with a strong conceptual backbone and a consistent vocabulary, they (mostly) take the guesswork out of layout. We still can’t do proper masonry layouts and it’s hard to remember the difference between align-items and align-content, but at least we’ve left float behind.

第一站将不得不Flexbox的和电网 -语言可以说是最重要的新功能。 凭借强大的概念骨干和一致的词汇表，它们可以很好地实施，(大多数情况下)无需进行猜测。 我们仍然不能做正确的砌筑布局和记忆之间的区别很难align-items和align-content ，但至少我们已经离开float后面。

HTML5 arrived with semantic elements, promising improved accessibility and machine readability. But more questions than answers resulted. Vague element names rooted in the world of print media were added: aside, section, and details appeared without a clear purpose in the application development landscape. Many of these elements brought a host of new default browser styling, completely undocumented. CSS resets emerged to cleanse the palate and bring consistency.

HTML5带有语义元素，有望改善可访问性和机器可读性。 但是产生的问题多于答案。 添加了根植于印刷媒体世界的模糊元素名称： aside ， section和details在应用程序开发环境中没有明确目的。 其中许多元素带来了许多新的默认浏览器样式，这些样式完全没有记载。 CSS重置出现以清理味觉并带来一致性。

Media queries and relative units deserve mention for enabling responsive design amidst the switch to mobile, but the honor is dubious. Breakpoints and font-based scaling are crude tools in the fight to support a vast range of devices that come in every shape, size, and pixel density. Browsers have stepped in to help with device simulators, while frameworks like Bootstrap give folks a reasonable starting point — at the cost of injecting huge stylesheets that are difficult to customize or override. Collectively, humanity has probably lost centuries in the time spent struggling to make minor tweaks to Bootstrap forms.

值得一提的是媒体查询和相关单位在转向移动设备时启用了响应式设计，但这一荣誉令人怀疑。 断点和基于字体的缩放比例是支持各种形状，大小和像素密度的各种设备的原始工具。 浏览器已经介入帮助设备仿真器，而Bootstrap之类的框架为人们提供了一个合理的起点-以注入难以定制或覆盖的巨大样式表为代价。 集体而言，人类可能已经花费了数百年的时间来努力对Bootstrap表格进行细微调整。

On the build side, SASS and LESS have made it possible for CSS to support larger websites and applications, pretty much entirely by the virtues of nested selectors and reusable variables. Combined with hot reloading from tools like webpack and in-place editing with autocomplete through browser dev tools, the development flow for debugging and experimentation requires far less context-switching than it once did.

在构建方面， SASS和LESS使CSS能够支持更大的网站和应用程序，这几乎完全是由于嵌套选择器和可重用变量的优点。 结合从Webpack等工具中进行的热重载以及通过浏览器开发工具进行自动完成的就地编辑，调试和实验的开发流程所需的上下文切换要比以前少得多。

But the advanced features in preprocessors enable fragile anti-patterns that are difficult to debug and even harder to read. There are no established frameworks for managing stylesheets in large applications — inconsistent spaghetti is inevitable. Linters can offset some of these maintainability issues, but the global scope is inexorable. One typo in one rule can mangle any application’s display, and no test will be the wiser.

但是，预处理器中的高级功能可实现易调试且难以阅读的易碎反模式。 没有用于大型应用程序中管理样式表的已建立框架-不一致的意大利面条是不可避免的。 短绒棉可以抵消其中一些可维护性问题，但是全球范围是不可避免的。 一项规则中的一个错字可能会破坏任何应用程序的显示，并且没有测试会是更明智的选择。

Thus, we find ourselves at the end of the timeline with CSS Modules and CSS-in-JS. These solve the scoping problem — a huge, necessary scalability win — but introduce new tribulations for reusability. Legibility in the DOM suffers as generated class names obfuscate intent. Performance drops as two decades of browser optimizations for rendering cascading stylesheets goes out the window. Separation of concerns dissolves as each component file now hosts a hundred lines of border-blah styles before the code even begins.

因此，我们在时间表的末尾发现了CSS模块和CSS-in-JS 。 这些解决了范围界定问题，这是一个巨大的，必不可少的可扩展性胜利，但是为可重用性引入了新的障碍。 由于生成的类名混淆了意图，因此DOM中的易读性受到影响。 随着用于级联样式表的二十年浏览器优化的失败，性能下降了。 由于每个组件文件现在在代码开始之前就承载了一百行border-blah样式，因此消除了关注的分离。

Congratulations! We’re all caught up on fifteen years of CSS. In total, we got two excellent specs for layout and a handful of tools that all fight each other. This a bit hyperbolic, of course (who could forget the indispensable page marks spec?), but we’ve mostly traded one set of problems for another. Just as we left behind the eternal struggle with Internet Explorer, mobile devices came in to detonate the possibility space.

恭喜你！ 我们都赶上CSS十五年了。 总体而言，我们获得了两个出色的布局规格和一些相互竞争的工具。 当然，这有点夸张(谁会忘记必不可少的页面标记规范？)，但是我们大多将一组问题换成另一组。 就像我们与Internet Explorer进行了永恒的斗争一样，移动设备也引爆了可能性空间。

The language simply hasn’t kept up — but why? CSS renders the entire web! Millions of programmers, designers, and unfortunate interns work with CSS every day. It’s worth our time to make this experience better; our creative capacity is limited by the quality of our tools.

语言根本没有跟上，但是为什么呢？ CSS呈现整个网络！ 每天都有数以百万计的程序员，设计师和不幸的实习生使用CSS。 我们有时间改善这种体验，这是值得的。 我们的创造力受到工具质量的限制。

Enough complaining, though. We know CSS is a bad experience — water is blue, the sky is wet. No one is coming to save us. What could we do to change this? Let’s think big. Full-throttle, pie-in-the-sky stuff.

足够抱怨了。 我们知道CSS是不好的体验-水是蓝色，天空是湿的。 没有人来拯救我们。 我们该怎么做才能改变这一点？ 让我们想一想。 油门全开的东西。

  • Syntactic sugar. Nested and parent selectors supported in native CSS would be a great start; anything to lessen the need for preprocessors just to get the most basic quality of life improvements.
    句法糖 。 原生CSS支持的嵌套和父选择器将是一个很好的开始； 减少预处理器需求的任何事情，只是为了获得最基本的生活质量改善。
  • First-class IDE support. There’s plugins for intellisense and code peeking when writing classes and styles in HTML and JSX, but they’re stopped cold by any number of tools and dependencies that abstract styles away from markup. There’s autocomplete for writing directly in stylesheets, but these don’t provide context or definitions like a fully-featured language might offer. Fluency with CSS shouldn’t demand memorization of its entire vocabulary and logic.
    一流的IDE支持。 在HTML和JSX中编写类和样式时，有一些用于智能感知和代码偷看的插件，但是它们被各种将样式从标记中分离出来的工具和依赖项所冻结。 有自动完成功能，可以直接在样式表中进行编写，但是它们不提供功能齐全的语言可能提供的上下文或定义。 流利使用CSS不应要求记住其全部词汇和逻辑。
  • Better specificity resolution. A relentless gotcha through the CSS experience is that collisions in specificity are resolved by using the last defined rule in the stylesheet. There’s nothing wrong with this on its own, except that a) it’s so easy to write selectors with equal specificity and b) order is not easily deterministic. With file concatenation and imported stylesheets from dependencies, we can’t rely on definition order. important provides an escape hatch, but it’s an excessively nuclear option that breaks the most fundamental concept in CSS. Instead, a decorator applied at the selector or individual property level to give priority at its existing specificity could address this gap. More radically, we could define our own rules for precedence based on the needs of the application.
    更好的特异性分辨率。 通过CSS经验，不懈的努力是，使用样式表中最后定义的规则可以解决特定性方面的冲突。 它本身没有任何问题，除了a)用相同的特异性编写选择器是如此容易 ，并且b)顺序不易确定。 通过文件串联和从依赖项导入样式表，我们不能依赖于定义顺序。 important提供了一个逃生舱口，但这是一种过分的核选择，破坏了CSS中最基本的概念。 取而代之的是，在选择器或单个属性级别应用装饰器，以根据其现有的特定性给予优先级，可以解决这一空白。 从根本上讲，我们可以根据应用程序的需求定义自己的优先级规则。
  • Customize the cascade. The rules of inheritance are countless, obtuse, and the single greatest source of confusion. Why does text-emphasis inherit but text-decoration does not? I’m sure there’s a valid reason somewhere in the story behind these specs — but as a consumer of this API, I don’t care. I need consistency and predictability. What if we could eliminate the guesswork and dictate inheritance per-property or per-selector?
    定制级联 。 继承规则无数，晦涩难懂，是造成混乱的最大根源。 为什么text-emphasis继承而text-decoration不会继承？ 我确定这些规范背后的故事中确实有一个合理的理由-但作为该API的使用者，我不在乎。 我需要一致性和可预测性。 如果我们可以消除猜测，并指示每个属性或每个选择器继承该怎么办？
  • Validation between styles and components. In React Native, you can get an immediate warning if you try to add text style properties to a non-text component — saving countless hours of fruitless tinkering. Currently, this kind of validation isn’t supported in HTML because any tag can (theoretically) support any property. If we could create and specify a style type for any component, this could prevent us from using invalid properties or values.
    样式和组件之间的验证。 在React Native中，如果您尝试将文本样式属性添加到非文本组件中，则会立即收到警告-节省了无数小时的徒劳无益的修补工作。 当前，HTML中不支持这种验证，因为任何标记都可以(理论上)支持任何属性。 如果我们可以为任何组件创建并指定样式类型，则可以防止我们使用无效的属性或值。

It turns out that someone else has already thought of this future: enter the CSS Houdini specifications, which offer direct access to the rendering engine. It enables custom parsing of selectors — a path towards syntactic sugar. It supports custom properties — a mechanism for controlling inheritance and default values. It provides typed object models for properties and values — style validation becomes possible!

事实证明，其他人已经想到了这个未来：输入CSS Houdini规范，该规范可直接访问渲染引擎。 它支持选择器的自定义解析-通往语法糖的路径。 它支持自定义属性 -一种控制继承和默认值的机制。 它提供了用于属性和值的类型化对象模型 -样式验证成为可能！

When I started writing this piece, I had no idea this spec was under development— and I suspect this is true for many others. This great walkthrough by Tab Atkins currently has 26 views. This one by Sam Richards has 900. Sure, some people are aware and excited — but the overwhelming perception I see among developers is that CSS as a whole is just legacy baggage, an atrophied limb of web development waiting to fall off.

当我开始写这篇文章时，我不知道这个规范正在开发中，我怀疑这对其他许多人都是正确的。 Tab Atkins的出色演练目前拥有26个视图 。 Sam Richards撰写的这篇文章有900个。当然， 有些人意识到并感到兴奋 -但我在开发人员中看到的压倒性印象是，整个CSS只是一个传统包，Web开发的萎缩之路正等待衰落。

I know better than to believe an incomplete spec — one that’s still in proposal and working draft phase after several years — is going to provide relief any time soon. Done properly, however, CSS Houdini could elevate the work of front-end design and UX development into something that is both more predictable and more expressive. After decades of spaghetti specifications and unreliable tooling, this is something worth being excited about in the ecosystem of web design.

我比相信一个不完整的规范(几年后仍在提议和起草阶段)会更好地相信会很快减轻麻烦。 但是，如果做得好，CSS Houdini可以将前端设计和UX开发的工作提升为更具可预测性和更具表现力的东西。 经过数十年的意大利面条规格和不可靠的工具，这在网页设计生态系统中值得激动。



翻译自: https://medium.com/@tjfroll/a-short-terrible-history-of-css-does-it-ever-get-better-9693ae6c5546