翻译自：CodePen's CSS

翻译自：CodePen's CSS

翻译人员：前端开发whqet，意译为主，不当之处欢迎大家指正。

译者说：近来一些国外的大牛分享自己网站的CSS，从中我们了解css相关技术的应用情况，把握CSS的使用规范，今天翻译下Chris Coyier 分享的CodePen's，希望可以给大家一些帮助。

------------------------------------------------------------

从Mark Otto的GitHub's CSS和Ian Feather的Lonely Planet's CSS哪里获得灵感，我迫不及待地加入到这个活动中来谈谈我们在CodePen网站里是怎么怎么做的。

概览

1.我们使用SCSS（CSS预处理器）

2.我们使用Autoprefixer（浏览器前缀兼容性工具）

3.我们使用the Rails Asset Pipeline（JS、CSS压缩工具）

4.专门弄个SCSS文件来显示文档目录

5.我们也有样式，不过主要是为了好看

6.我们不适用任何特殊的架构，除了“use classes a bunch ”之外

7.努力保证每个页面使用2-3个css

8.使用@mixin来做媒体查询，以便于我们可以随时关闭该功能

9.使用注释是个好主意

10.一些统计

11.我是用了“我们”这个词，但其实大部分时候只是“我”而已

12.我们可能的未来

预处理器

总是有人喜欢或者讨厌CSS预处理器，但是如果没有预处理器，想在任何网站使用和维护变量将会变成天方夜谭。如果你觉得因为过度工具化将会丧失创造性，我只能一笑了之。

坦率的讲，所有主流预处理器（SASS、LESS、Stylus）都能够实现我的大部分需求，但是我更喜欢SCSS，因为良好的交流社区。下面列出SCSS的重要特征（依据重要程度排列）:

a.@import

b.@mixin

c.nesting

d.variables

e.@extend

f.math

g.loops

h.working with them enough so I understand all the cool kid demos

它又增添了一些难以置信的功能（我都想象不到）。

前缀处理

我几乎不不考虑css属性和值的浏览器前缀问题，因为Autoprefixer可以很好的解决这个问题，我尤其喜欢它在处理flexbox时的表现。

我以前经常使用Compass，但是我发现我用到的95%都来自CSS3 @minxins，相对于仅仅为了前缀到处使用@include，我更喜欢使用和原生的CSS一样的写法。

我现在怀念Compass的一点是它的生成SVG渐变的能力，但是……，仅仅为了IE9需要的一些东西它太大一点了，所以我想我损失的不多。

Rails

我是Rails Asset Pipeline的疯狂粉丝。例如我把这些放到视图中