CSS：现在与未来

CSS Now 🎉

CSS Future 🚀

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

我之前写过文章，探讨为什么很多开发者害怕CSS。这通常是由于他们对CSS知之甚少，或者掌握的知识已经过时。我们能否通过新的知识帮助他们克服这种恐惧呢？让我们一起来看看！

CSS Now 🎉

这就像天气预报一样。我们首先要了解当前的天气状况。然后才能预测接下来一周的天气情况。好吧，也许这个比喻有点夸张。但你明白我的意思。

网络无处不在！

哦不，桌面屏幕尺寸固定的时代早已过去。很多人都听说过媒体查询。如果你想针对特定尺寸的屏幕，可以这样做@media screen and (min-width: 600px)。但你也可以像这样针对屏幕方向进行设置@media screen and (orientation: landscape)。通过一些特定的组合，我们甚至可以将 Apple Watch 作为目标设备！很简单！所以我们不必担心，如今我们需要针对不同的设备进行设置。

重置

使用 CSS 时，你会很快发现浏览器的默认样式并不相同。有几种方法可以解决这个问题。最常用的两种方法是使用 Reset CSS 和 Normalize.css。Reset CSS 会清除所有 HTML 元素的内置样式。Normalize.css 则可以消除浏览器对 HTML 元素样式的不一致性。与 CSS Reset 不同，Normalize.css 不会完全清除所有样式，而是保留一些有用的默认样式。我几乎总是使用 Normalize.css。

预处理器

几年前，这可是个热门话题。CSS 预处理器允许你使用独特的语法生成 CSS，并支持 mixin、函数、嵌套、继承等特性。它（主观上）能让代码更易读、更易维护。这曾经是个热门话题，而且热度至今不减。我们只是习惯了它的存在。我们仍然在使用 Sass、Less 和 PostCSS。我个人非常喜欢 Sass 的 SCSS 语法和 PostCSS。但我感觉 ECMAScript 和 jQuery 的发展轨迹正在重演——现在 CSS 和预处理器也面临着同样的问题。CSS 现在支持名为 CSS 自定义属性的变量。我们将会见证 CSS 朝着预处理器的方向发展。

Flexbox 和 Grid

约瑟斯（丹麦语），火势越来越猛了！我们都听说过 CSS Flexbox 和 CSS Grid。它们都用于布局——但它们之间有什么区别呢？Grid 和 Flexbox 的主要区别在于 Grid 是二维的，而 Flexbox 是一维的。使用 Grid 可以同时处理列和行，而使用 Flexbox 只能处理列或行。我的建议是，你应该使用 Grid 来构建页面的整体布局，而使用 Flexbox 来处理组件的内容。别忘了，现在使用 Flexbox 可以轻松实现元素居中。这个例子就实现了水平和垂直居中。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

建筑学

开发者们仍在努力解决的一个问题是代码库的文件结构。Sass 可以帮助你@import管理文件，从而构建文件系统。现在我们还有 ITCSS，即倒三角CSS 。它是一种架构，可以帮助你组织项目中的 CSS 文件。其理念是，在前两层不输出任何 CSS，然后指定全局选择器，并逐步细化。这样我们就无需使用 `<style>` 标签进行冗余覆盖!important。这种结构还有助于更好地理解层叠和继承的工作原理。

CSS Future 🚀

我绝非预言家，这只是我的一些随想。但我们都知道，网络正在向各种奇奇怪怪的设备蔓延。未来我们必须认真应对这个问题。我们也正逐渐从预处理器转向 CSS。未来会怎样？让我们拭目以待！

CSS属性

CSS 的功能越来越强大，他们一直在添加新的属性和值。我期待着一个新值能得到更好的支持：`{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{{ display: contents{ { display: contents{ conic-gradient()...light-level

可变字体

我不是字体专家，但这听起来真不错。可变字体可以将同一种字体的不同变体合并到一个文件中。这样就无需为每种字重或样式都创建单独的字体文件了。我们可以使用诸如 wght font-variation-settings（字重）、wdth（字宽）、ital（斜体）、slnt（倾斜/斜角）等值来自定义字体，还可以通过其他方式进行自定义。您可以参考这篇指南。

.container {
  font-weight: 400;
}

.container {
  font-variation-settings: 'wght' 400;
}

.container {
  font-variation-settings: 'wght' var(--weight);
}

CSS Houdini

好的，这真的很有意思。Houdini CSS 本质上是一套全新的浏览器 API，它允许你更深入地访问浏览器的 CSS 引擎。我们可以通过 JavaScript 访问这些 API。这个新概念是由 W3C 的一个新工作组开发的，其最终目标是彻底解决浏览器兼容性问题。Houdini CSS 目前有 7 个 API，每个 API 都针对一个特定的问题。我对这方面了解甚少，但我一定会尝试一下！

这些是我对 CSS 的一些小想法。我并非精通 CSS，但我喜欢分享一些知识小窍门🐔

如果你没有做自己喜欢的事情，那就是在浪费时间。

— Steffen Pedersen 🌚 (@mrsteffenp) 2019 年 6 月 10 日

感谢您抽出时间！

如果你喜欢这篇文章，请点赞❤️并在推特上关注我。