前端开发whqet,csdn,王海庆,whqet,前端开发专家
翻译自：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的疯狂粉丝。例如我把这些放到视图中
它会在我需要的时候生成一个css。
我们设置一个很长的过期时间。每次我们部署的时候，它都通过改变这些乱码数字打破缓存，因此，非常好的缓存配置。
在codepen网站我们确实使用sprockets，但是仅仅针对javascript，类似于这样工作：
//= require common/whatever.js //= require_tree ./../hearting/
本来也可以在css中这样做，但是没必要：
a.sass可以做到这些
b.如果使用sass解决问题，依赖关系更好。例如$variables和@mixin都可以跨文件使用。
文件组织 有个专门的scss文件仅仅用来展示需要加载的css文件，相当于一个目录，而不做任何实际的事情。例如网站的global.scss就是这样的:
// 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;// third-party components // (none at the moment)
我努力遵守这些，但是也存在着大量的意外的情况，我不得不把应该导入的这些东西都扔到一个文件中去，所以我创建了一个shame文件(不大光彩的文件)来实现这个目的。
@import shame; // get organized, ya schlub.
代码组织 像强迫症一样执行的规范
a.对属性和嵌套应用2个空白的缩进
b.选择器前后各加一个空白 c.每行一个声明（对于区分来说非常重要）
d.:之后加一个空白
e.给结束符}一个相当于其选择器的缩进级别
f.0作为长度时，不加单位
g.使用连字符，不用下划线
大部分情况下我都会遵守的规范
非常相关的声明块之间不加空行
.thing {}.related-thing {}
稍微有点相关的声明块之间加一个空行
.thing {}.another-thing {}
非常不相关的声明块之间加两个空行
.thing {}.totally-different-thing {}
一些我不太在意的规范
属性的顺序，相关的属性以经典组合出现，还是随便。
注释使用的样式。
在实际使用中，我甚至不遵循自己写的规范。
架构 我的理论是，尽量给所有元素添加一个类，我不知道这点不是不是接近于smacss，oocss，bem，或者诸如此类。
当然，不是说我不再进行任何嵌套，或者强制规定可以嵌套几层，我只是不进行深度嵌套。
一般来说，我经常这样做：
.box { h2 { &:after { } }}
这个时候我会想，我是否应该给h2一个类，我是否应该把这种类型的标题做成一个可重用组件。然后我就不在意了，因为以后如果它变得非常常用，我可以很容易的修改。
总体哲学是保持较低的特殊性。因为无论多棒的可重用性，它总是可能多次覆盖，因此选择器的特殊性越低，越容易覆盖。而且这种覆盖我们可以比较容易的再次覆盖，不用走id选择器或者!important这种极端。
rem作文字的单位，px作其他单位，当然也有意外。
请求
我努力保证每个页面加载2-3个css请求
global.css page.css (if not the editor) section.css (if needed)
尽量减少页面的请求数量，但是不至于说把所有的东西都放到一个文件中去。codepen有太多的单独页面css，如果都放到一块去global.css将不堪重负，我没有试过，也许那一天试试也很有意思，起个名字叫做squicssh_it_real_good.
媒体查询
我使用@minxin实现媒体查询，有时我采用“this width and bigger”，有时采用“this width and smaller”（可以看看媒体查询逻辑）。类似于这样：
@mixin breakpoint($point) { @if ($mqs == true) { @if $point == baby-bear { @media (max-width: 500px) { @content; } } @if $point == mama-bear { @media (max-width: 700px) { @content; } } @if $point == papa-bear { @media (max-width: 800px) { @content; } } @if $point == super-bear { @media (max-width: 1280px) { @content; } } @if $point == reverso-baby-bear { @media (min-width: 501px) { @content; } } @if $point == reverso-mama-bear { @media (min-width: 701px) { @content; } } @if $point == reverso-papa-bear { @media (min-width: 801px) { @content; } } @if $point == reverso-super-bear { @media (min-width: 1281px) { @content; } } @if $point == exclusive-baby-bear { @media (max-width: 500px) { @content; } } @if $point == exclusive-mama-bear { @media (min-width: 501px) and (max-width: 800px) { @content; } } @if $point == exclusive-papa-bear { @media (min-width: 801px) and (max-width: 1280px) { @content; } } @if $point == ios { @media (min-device-width: 768px) and (max-device-width: 1024px), (max-device-width: 480px) { @content; } } }}
注意mixin头部的语句“@if ($mqs == true) ”实现媒体查询功能的开启与关闭功能，在内容目录的scss文件头部声明一个变量$mqs（true或者false）控制开关。因为codepen里的一些页面需要响应式布局而另一些页面不用，没有采用响应式布局的页面可能跳转到一个专门的移动端版本中去。
注释
我是一个注释自由主义者，主要是因为我从不后悔，如果之后该注释不够明朗、不太贴切，我会直接删掉该注释。
.drag-from-pen-grid { padding-bottom: 52px; /* adding this to make room for pagination. a little magic-numbery... */}
一些统计 一共有160个单独的scss文件，我从来不担心找不到文件，因为sublime提供了强大的查询功能，而且文件具有命名清晰、结构明了。
scss文件共13345行
global.css文件11.8k
page.css文件5.5k
editor.css文件6.2k
css文件不是影响性能的关键因素，自定义字体四倍与它，js文件10倍与它。
仅仅是我
网站由三个人合作开发，css方面主要是我负责。
未来
我现在没有lint，我将会lint javascript，那会很好
我没有创建本地资源地图，只是因为我觉得现在sass/chrome不能很好的支持
我没有一个真正的模式类库。创建一个可视化的模式类库也许会很棒。
enjoy it.
----------------------------------------------------------
前端开发whqet，关注web前端开发，分享相关资源，欢迎点赞，欢迎拍砖。
---------------------------------------------------------------------------------------------------------