CSS Shapes是用来定义内容环绕的路径，这些路径都是通过形状函数来定义，比如：circle()、 ellipse()、 inset()或 polygon()，他们都被定位在一个虚拟盒子(virtual box)中，也就是引用框(reference box)。引用框定义了形状的坐标系统，因此它影响了形状如何绘制和定位。他有四种引用框可供选择：margin-box, padding-box, border-box和 content-box。每种引用框都会产生不同的结果。请继续往下阅读，了解他们是如何工作。

还有两个月时间，我使用Sass就有两年时间了。几乎每一天，在工作中，在家里，在项目中，都有人问我，怎么更好使用Sass。很高兴他们这么相信我，每天能为他们提供帮助，我感到非常高兴。有些需求是合理的，有些需求是烦死人的。嘿嘿，我们可以从任何地方开始。也有些是抽象的。每个人都希望使用Sass能变得更简单（其他预处理器也在做这样的事情）。包括我在内，我也一直在这么做。

在编写HTML结构时，多类名的运用大家都应该有使用过，虽然这样使用能给制作带来极大的方便，但也存在一定的风险。为了更好的区分，很多时候在使用BEM的命名方式，以有让多类名在同一个元素中变得更独立性，不至于覆盖样式。但在Sass中运用BEM的时候，很多时候提倡使用@extend来扩展。那么是使用多类名更好呢？还是使用@extend扩展更强呢？

响应式网站听起来并不陌生，但还是有很多同学没有实战经验，可以说听其名已久，但就从未操刀。今天开始根据Gilt团队以制作响应式Gilt.com网站为例，通过一个系列来介绍Gilt团队是如何制作一个响应式网站，碰到了什么问题？又是如何解决这些问题？首先要向大家介绍的是回顾与总结。通过回顾与总结，来理清楚整个开发过程的每个环节，更为重要的是通过这样的模式在不断提高团队的整体实力。

在第一篇文章中，分享了如何组织一个成功的回顾总结会议。那么在此文章中，主要讨论我们工作中所用到的技术以及如何组织媒体查询。通过实战来介绍在项目中使用块媒体查询好还是在选择器中插入媒体查询方便。

在本系列的第二篇文章中，我的同事Greg Mazurek讲了为什么在项目使用“在选择器内使用媒体查询”。采用这种模式的好处就是在未来开发中代码可维护性更强。那么，接下来我将讨论我们如何把相同的原则应用到测试实践中来。

为了把网站Gilt.com在移动端响应，我们基于特殊行动团队确定的几种响应式模式来“响应”我们网站布局。早点确定这些模式有利于帮助我们更有信心地作出响应式相关的决定。在这第四篇响应式相关博文里，我将与你分享如何发现和实现我们确定的最热衷设计模式之一：全屏Modal!

在几个月之前，我阅读了Harry Roberts写的《Grouping related classes in your markup》一文。他介绍了一个很有趣的概念——用来处理CSS类名。在这篇文章中介绍了使用[]来使用相关的属性，快速选择需要的目标元素。介绍的示例中，讨论了使用类名还是属性声明更易于一目了然选择元素。

自从2008年Nicole Sullivan提出Object-Oriented CSS(OOCSS)以来。它就成为一个领先的模块系统，用来组织你的CSS代码方式之一。

OOCSS不同于其他组织CSS代码方法，比如SMACSS或者BEM。通过将CSS代码和结构分离让你的模块可重用。事实上，我也通常将SMACSS与OOCSS混为一谈。其实John W. Long在The Sass Way上面写了很多篇有关于CSS模块化的教程。

SVG全称为“可缩放矢量图形”，它的名字暗示着它本身的特点。SVG让我们可以将一个图形从100%放大到1000%并且完全不失真。SVG是一个基于XML并可以在SVG对象中描述不同形状和路径的文件。每一个形状和路径都由一系列的点、位置、长度、半径，等等的来组成。如果你曾经使用过任何的矢量图软件 (像 Adobe Illustrator 或 Corel Draw)，你能将你创建的矢量图轻松地输出为SVG文件。