CSS现在已经能实现比网站开发者预料到的更多的功能，并且随着时间的推移，样式表语言越来越强大，能实现许多原先需要依靠JavaScript才能实现的功能。在这篇文章中我们将会介绍CSS函数中8种有用的小技巧。

如果你已经对CSS有了一定的了解，也许你之前已经掌握了一些字体加载的方法，那么你使用过font-display吗？font-display是CSS中新添加的属性，它能实现之前类似于Font Loading API和Bram Stein's Font Face Observer这种第三方脚本实现的功能。如果这是你第一次接触这类知识，那也没有关系，我们会先简单介绍一下浏览器加载字体的默认方法。

上周看到有一篇关于CSS滤镜效果函数的文章，其中的效果函数相对来说比较容易理解，而且上手难度低。但是，这种方式仅仅是添加CSS滤镜效果众多方式中最弱的一种。今天让我们来看一看滤镜基元，这是为图片和元素添加滤镜效果另外一种更加强大的方法。

在De Voorhoede,我们尽所能地为客户推进前端性能。虽然不是很容易就能说服客户完全按照我们的指令去做，但我们一直在尽全力和他们沟通，解释提高性能的重要性，或者将他们的性能与他们主要竞争对手进行比较。最近更新了我们的网站，除了设计上进行了大修，这也是一个将性能提高到最优的理想机会。我们的目标是有效控制，注重性能，与未来技术兼容，并将创建网站变为了一件有趣的事。以下是我们如何改进网站的具体做法。

最近我在Codepen看到一个这样子的加载示例。使用CSS完成的具有渐变褪色倒影的、旋转的3D条形块。每一个条形块使用了一个元素，之后进行复制，这些元素形成倒影，最后添加渐变进行覆盖形成渐变褪色效果。这听起来有点像用你的左脚趾从背后抓右耳朵般不切实际。更不用说渐变覆盖方法形成褪色效果在非平面背景色不起作用了。是不是有更好的方法使用CSS可以实现这种效果呢？

如果你会了Sass，你就会了ES2015!...虽然不是全部，但也有很多惊人的相似之处！当学习最新的ECMAScript 规范，ES2015(以前被称为ES6)时，碰到了一些让我立刻想到Sass的特性。

在Sass中有很多方法可以解决媒体查询这个问题，但是其中一些方法存在相同的问题。一开始我会还原这个问题，然后提供我的解决方案，最后列出这个方案对工作流程的好处。

BEM是由Yandex团队提出的一种CSS Class 命名方法，旨在更好的创建CSS/Sass模块。他需要遵循一些特殊规定，有些人认为这些规定很冗余，但是我发现他们对于理解DOM有着很大的帮助。你可以去查看我之前的文章去了解为什么BEM如此伟大。或者你可以去查看这几篇中文文章来了解BEM(《BEM的定义》《为什么我们需要BEM》)。今天这篇文章，是我在假设你对BEM和Sass已经有所了解甚至熟悉的基础上完成的。

当我们提及预编译的时候，我经常会被问到的一个问题是Mixins 还是 @extend ? 关于这个话题我经常直言不讳，而且鉴于以下的这几条原因，我坚定的认为你应该避免使用@extend:

为了有效的维护和开发项目，代码的重复利用就显得尤为重要。在Sass中，除了@import和@extend可以使你的代码更加具有重复利用性，@mixin指令也同样能提高你代码的重复使用率并简化你的代码。