Mark Otto和lan Feather分别分享了GitHub和Lonely Planet这两个网站中如何应用CSS，我觉得我也应该参与到这个有趣的活动之中，谈谈我们在CodePen中是怎么应用CSS的。
概览
- 预处理器使用了SCSS
- 我们使用Autoprefixer
- 我们使用Rails Asset Pipeline
- 实际加载的那些可解释为CSS的SCSS文件其实就是一个包含各模块的目录
- 我们有一个统一样式，主要原因是这样看起来一致性更好
- 我们不使用任何特别的“CSS架构”，只使用类
- 每一个网页中不超过2-3个CSS文件
- 媒体查询我们使用可以关掉的
@mixin - 我们鼓励注释
- 一些统计数据
- 在本文中“我们”这个词大多数只代表我一个
- 未来展望和期待
预处理器
人们对于预处理器褒贬不一，但是我觉得如果做一个比较大的网站项目，没有预处理器是非常困难的。若你认为我这是在过度依赖工具，会让我效率变低，那么请允许我嘲笑你。 我更喜欢SCSS是因为我喜欢它的社区，同时我也认为它更好。但实话说，所有这些主流的预处理器（Sass，LESS，Stylus）都基本可以满足我的需求。这里是一些我觉得有用的特性（按照实用性递减排序）：
- @import
- @mixin
- Nesting（嵌套）
- Variables（变量）
@extend- Math（数学运算）
- Loops（循环）
- 长时间用它们工作，帮助我理解那些炫酷的小例子
不用预处理器我无法想象要花多大的精力才能取代这些特性。
在CSS属性中加与浏览器相关的前缀
因为有Autoprefixer这个工具，我在工作中几乎不需要记CSS中属性或者值。我特别喜欢它对 flexbox (伸缩布局盒) 回退的处理方式。 我以前用Compass比较多，但我发现95%的情况下都是用它处理CSS3的@mixin。我更喜欢“所见即所得”这种方式，而不是只为标前缀而到处放@include。不用Compass 之后我比较怀念的一个功能是生成SVG渐变，但对于仅在IE9才需要的功能来说它也显得过于重型了，所以总体上我也没什么大损失。
Rails
我是Rails Asset Pipeline的粉丝，它实在太好用了。 举个例子： 我把句话放在视图中:
|
1 |
<%= stylesheet_link_tag "about/about" %> |
然后它会产生一个我需要的CSS文件：
|
1 |
<link href="http://assets.codepen.io/assets/about/about-a05e4bd3a5ca76c3fb17f2353fedbd99.css" media="screen" rel="stylesheet" type="text/css" /> |
我们在资源里把终止时间写得离现在远一点。
我们每一次部署的时候，它都会通过重新生成随机数来重新缓存，所以这是一个非常棒的缓存机制。 我们在CodePen中只是对JavaScript使用Sprockets。有了它我们可以这么干：
|
1 2 |
//= require common/whatever.js //= require_tree ./../hearting/ |
你也可以在CSS这么做，但何必自寻烦恼呢，因为： 1. Sass能够实现这个功能 2. 如果你用Sass实现这个功能，那依赖性表现更好。像$variables和@mixin都能够在文件之间应用了。 我们并不会把CSS文件上传到Git仓库中，这样对Git很好，所有的资源都在部署的时候进行解释编译。
文件组织结构
被加载的CSS文件会有一份对应的SCSS，这个SCSS文件中没有任何实际的CSS代码，而是用来描述CSS文件中的内容。举个例子，这是我们现在的global.scss：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// General Dependencies @import "global/colors"; @import "global/bits"; // Base @import "global/reset"; @import "global/layout"; // Areas @import "global/header"; @import "global/footer"; // Patterns @import "global/typography"; @import "global/forms"; @import "global/toolbox"; @import "global/buttons"; @import "global/modals"; @import "global/messages"; @import "global/badges"; // 第三方组件 // (目前没有) |
我试着坚持这样做，但每当我向一个本应被全部导入的文件中添加代码时，老是会抛出一堆异常。我应该弄个通告文件然后写上：
|
1 |
@import "shame"; // 注意有点条理啊，里面这几个魂淡。 |
代码的组织结构
我写代码时一定会遵循的规范：【译者注：作者在原文中说是一种强迫症，表示这些规范是他一定会遵循的】
- 属性和嵌套有2个空格的缩进
- 在选择器(selectors)之后或”{“前面加一个空格
- 一行一个属性声明
- 在”：”(冒号)后面加一个空格
- 尾部的”}”符号另起一行，并与选择器同等缩进
0作为长度的时候不加单位- 名称中使用连字符”-”而不用下划线”_”
我写代码时大多会遵循的规范：
两个联系密切的类中间不加空行：
|
1 2 3 4 5 6 |
.thing { } .related-thing { } |
有一点联系的两个类之间加一个空行：
|
1 2 3 4 5 6 7 |
n-num" data-line="crayon-5812b561b0866056379044-3">3 4 5 6 7
| an Feather分别分享了GitHub和Lonely Planet这两个网站中如何应用CSS，我觉得我也应该参与到这个有趣的活动之中，谈谈我们在CodePen中是怎么应用CSS的。
概览
预处理器人们对于预处理器褒贬不一，但是我觉得如果做一个比较大的网站项目，没有预处理器是非常困难的。若你认为我这是在过度依赖工具，会让我效率变低，那么请允许我嘲笑你。 我更喜欢SCSS是因为我喜欢它的社区，同时我也认为它更好。但实话说，所有这些主流的预处理器（Sass，LESS，Stylus）都基本可以满足我的需求。这里是一些我觉得有用的特性（按照实用性递减排序）：
不用预处理器我无法想象要花多大的精力才能取代这些特性。 在CSS属性中加与浏览器相关的前缀因为有Autoprefixer这个工具，我在工作中几乎不需要记CSS中属性或者值。我特别喜欢它对 flexbox (伸缩布局盒) 回退的处理方式。 我以前用Compass比较多，但我发现95%的情况下都是用它处理CSS3的 Rails我是Rails Asset Pipeline的粉丝，它实在太好用了。 举个例子： 我把句话放在视图中:
然后它会产生一个我需要的CSS文件：
我们在资源里把终止时间写得离现在远一点。
我们每一次部署的时候，它都会通过重新生成随机数来重新缓存，所以这是一个非常棒的缓存机制。 我们在CodePen中只是对JavaScript使用Sprockets。有了它我们可以这么干：
你也可以在CSS这么做，但何必自寻烦恼呢，因为： 1. Sass能够实现这个功能 2. 如果你用Sass实现这个功能，那依赖性表现更好。像 文件组织结构被加载的CSS文件会有一份对应的SCSS，这个SCSS文件中没有任何实际的CSS代码，而是用来描述CSS文件中的内容。举个例子，这是我们现在的global.scss：
我试着坚持这样做，但每当我向一个本应被全部导入的文件中添加代码时，老是会抛出一堆异常。我应该弄个通告文件然后写上：
代码的组织结构我写代码时一定会遵循的规范：【译者注：作者在原文中说是一种强迫症，表示这些规范是他一定会遵循的】
我写代码时大多会遵循的规范：两个联系密切的类中间不加空行：
有一点联系的两个类之间加一个空行： |
