CodePen's CSS

前端开发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的疯狂粉丝。

好比我把这些放到视图中

    <%= stylesheet_link_tag "about/about" %>

它会在我需要的时候生成一个css。

<link href="http://assets.codepen.io/assets/about/about-a05e4bd3a5ca76c3fb17f2353fedbd99.css" media="screen" rel="stylesheet" type="text/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一个类。我是否应该把这样的类型的标题作成一个可重用组件。

而后我就不在乎了。因为之后假设它变得很是经常使用。我可以很是easy的改动。

总体哲学是保持较低的特殊性。

因为无论多棒的可重用性。它老是可能屡次覆盖，所以选择器的特殊性越低，越easy覆盖。而且这样的覆盖咱们可以比較easy的再次覆盖。不用走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前端开发，分享相关资源，欢迎点赞。欢迎拍砖。
---------------------------------------------------------------------------------------------------------