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前端開發，分享相關資源，歡迎點贊。歡迎拍磚。
---------------------------------------------------------------------------------------------------------