CodePen's CSS

代码组织

像强迫症一样执行的规范

a.对属性和嵌套应用2个空白的缩进

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.

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