踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。请仔细通读示例代码。确保自己的确看懂了。每一节都是在上一节的基础上进行的。如果你心急跳过了，对后面部分的理解就可能会出现偏差。

布局一般都是遵循按行和列等线性原则，Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好，更灵活，但相对于印刷媒体而言，Web布局总体上还是受到很好的限制，特别是内容流上。杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。

在这个系列教程中的《列和间距》一文中了解到了在CSS Grid布局中如何实现流体网格列和列间距。也了解到了没有必要指定网格项目具体的值就可以实现网格项目的排列位置。如果显式声明网格属性，网格项目根据自动排列算法，会使网格排列变得更糟糕。在这篇文章中我们将看看这个算法是如何影响网格项目的位置排列。

我本来觉得应该从介绍CSS中引入变量的用途开始讲起，但事实上，很多流行的CSS预处理/后处理程序已经做了很好的诠释。当然，手动地去搜索或者查找/替换依然能满足你的需求，但这就像是不在JS中使用变量一样--很痛苦。事实上，CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量！同时，就像Webkit的小伙伴们在审查工具中做的那样，你也可以避免在你的代码中出现重复的代码片段（冗余）。

昨天我在An Event Apart上看了@Rachel Andrew分享的CSS Grid Layout。Grid是CSS一个强大的特性，而且离到来的一天越来越近，它将是一个强大的Web布局模式。当然，那一天还没到，到目前没有稳定的浏览器支持Grid规范。

最近，我不得不在一个网站大量使用倾斜角度作为其设计指南的一部分。倾斜角，是指一个区域它的顶部或底部边缘不是完全水平而是倾斜的。实现这种效果有很多种方法。例如可以将base64编码的图片应用为背景，但这会使得它很难自定义（颜色，角度等）。另一种方法是倾斜或旋转绝对定位的伪元素，然而倾斜变换是我最不愿意处理的一件事。

“Card”这样的UI组件在现在的Web中经常可见，但我们制作这方面的UI组件方式仍然受到一定的限制。直到现在，通过CSS Grid和Flexbox的组合，可以使卡整齐对齐，响应性更好，并适应其中的内容。接下来看看我们是如何制作的。

组织文件是每个项目的重要一步，特别是如果你半年重新打开这个项目的时候，你会发现，文件组织得好，对于你理解项目会有很大的帮助。如果你从未接触过Sass，你可以先阅读一下Sass指南或者点击这里阅读Sass相关的教程。

踏出理解函数式编程概念的第一步是最重要的一步，有时也是最难的一步。不过也不一定，取决于你们的思考方式。

如果您构建过不少网站，可能已注意到可以在一个项目中轻易的复制代码然后跨项目应用。反复复制相同的代码会浪费时间和增加错误出现的可能性。在Sass之前的系列中，我曾说mixins是样式重用和编写 DRYer代码的一个选择。Functions是实现相同功能的另一个方法。