现在动辄几兆大小的页面加载量，让性能优化成了不可避免的热门话题。WEB 应用越流畅，用户体验就会越好，继而带来更多的访问量。这也就是说，我们应该反省一下那些过度美化的 CSS3 动画和多重操作的 DOM 元素是否都考虑到了在性能方面的影响。

CSS animations 用法简洁功能强大，一个完整的动画只需命名、@keyframes 关键帧定义以及绑定到元素三个步骤。虽然 CSS animations 的概念和用法比较简单，但却可以创造复杂精致的动画，比如多步过渡动画，这也是本文关注所要向您介绍的重点。

过去几年，我们常常会听说硬件加速给移动端带来了巨大的体验提升，但是即使对于很多经验丰富的开发者来说，恐怕对其背后的工作原理也是模棱两可，更不要合理地将其运用到网页的动画效果中了。在本文中，我会和大家分享有关硬件加速的前端技巧。

如果你深入地使用过 Sass，那么一定会接触过 mixin。一个独立的 mixin 往往聚合了大量的控制指令来实现复杂的功能。在本文中我们就将这些控制指令和表达式做一些讲解和实践。也许你在开发中不见得会用到它们，但是熟悉一下这些指令，可能会有意想不到的收获！

众所周知，Sass中有一些类似于其他编程语言的特性与功能，那么在本文中，我们将会解析一下Sass中的操作符。主要向大家介绍如何使用Sass中的操作符。

自从我从事 WEB 开发以来，一直都在规规矩矩地使用标准的栅格布局。直到有一次在公司跟实习生交流时，我意识到开发者的思维已经被条条框框固定住了。这里并不是想说栅格布局这种规规矩矩的布局有什么不好，实际上这些布局就像是沃尔沃汽车一样，让人感到安稳和可靠。但是，拥抱变化何尝不是一件趣事？非常幸运的是，我能与众多才华横溢的设计师共同工作。在最近的一个项目中，他们提出了一种基于栅格布局的菱形布局。话不多说，迎战问题(•̀o•́)ง！

如果你使用过 Sass 3.3 之前的版本，那么你一定对那段时光颇有感触，那时候没有现如今这么好的条件，那时候的 Map 还只能用多重列表（lists of list）来模拟。多重列表可以实现复杂数据的嵌套定义，但却不是以键值对的形式实现的，所有当我们需要获取其中特定的某一项时就会比较麻烦。Map 这种数据类型天生就是基于键值对的形式，非常便于组织数据。

一直以来，undefined 都不是 JavaScript 的关键字或保留字，这意味着我们可以修改 window.undefined 的值。由于 undefined 会被频繁调用作为比较运算的操作数等原因，修改 undefined 的值是有弊端的，所以在 ES5 规范之后，window.undefined 被定义为不可写、不可配置的属性。

垂直居中、水平居中或者说水平垂直居中的方案很多种，但在实际当中，不管是具体业务或者入职面试，很多同学都有失足之处。那么使用CSS实现居中效果困难吗？显然不是。实际上有许多方法可以实现居中效果，但在具体情况中，我们往往无法判断哪种方法最合适。@Chris Coyier整理了一篇有关于居中的实现方法的文章，可以说这篇文章涵盖了各式各样的居中方法，希望这篇文章能帮你解决选择困难症~

vertical-align 是 CSS 中的一个常见属性，但是当你第一次学习和使用它的时候，往往会很困惑，所以我觉得有必要深入了解它的用法。最常见的使用方式就像下面这样：img { vertical-align: middle;}。从这里可以看到，vertical-align 属性被应用到了 img 标签上。img 标签是naturally inline elements,，它们可以嵌入到文本之中，而 vertical-align 属性就是用来控制它们相对于所在行的对齐方式。在我的印象中，开发者使用 vertical-align 最大困惑就是在块级元素上设置该属性不会有任何效果。