iT邦幫忙

DAY 43
1

Sass3.3 & CSS設計模式系列 第 44

Sass教學(43) - Sass Style Guide(樣式指南) - Sass、Github、Codepen

以下文章同步於Github

相關連結
1.Sass官網 Styleguide
2.github Styleguide
3.CodePen's CSS

進入主題
當你所在的組織是一個團隊的時候,
為了讓大家的程式碼都能保持一致得風格來設計,都會一同討論並建立Style Guide出來,
觀察別人的Style Guide也有助於提升自己對程式碼的風格建立,
在閱讀這個章節前,你可以先瀏覽這份相當完整的CSS-Guidelines
相信可以獲得不少撰寫風格上的改善,
這一次我則是挑了三個的不錯的Sass Style Guide供大家參考:

**Sass 官網**
你現在看到的Sass官網其實已經是改版過的了,
這次Sass官網也釋出了他們的stylecode,

1.Typography
使用@mixin與變數統一管理字體大小行距、粗體、字型:

//字型
@include font-size-small    //編譯出12px與對應的行高
@include font-size-regular  //編譯出16px與對應的行高
@include font-size-large    //以此類推
@include font-size-x-large  
@include font-size-xx-large 
@include font-size-xxx-large    
@include font-size-xxxx-large   
//Weights 粗體
$font-weight-light:300;
$font-weight-regular:400;
$font-weight-bold:600;
//Families 字型
$font-family-text:source-sans-pro, 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-family-display:source-serif-pro, Georgia, 'Times New Roman', Times, serif;
$font-family-code: source-code-pro, Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;

為了保持文字排版能夠遵守垂直韻律,所以每個@Mixin除了編譯出字型大小外,
也會編譯出對應的行距出來,
另外在粗體與字體也會集中變數來管理,
這點Bootstrap Sass也有做到這一點。

2.撰寫習慣
1.HTML預處理器是haml、erb、md來混用
2.HTML都是用小寫來標記元素和屬性,Self-close empty elements也會用結尾斜線。
3.使用的Framework有Compass、Susy、Breakpoint
使用到Susy的話基本上都會載入Breakpoint,
因為Susy的RWD @mixin會使用到Breakpoint的功能。

3.Code Style Guide 撰寫風格
1.用連接符連接區塊底下的元素:(snake_case)
2.在class命名上使用一般到具體的作法,可瀏覽此篇文章
3.避免嵌套太深 (.nav ul li a span)
4.Write comma-delimited selectors on separate lines.

4.RWD 斷點

$mobile-small: 240;
$mobile-large: 320;
$tablet-small: 480;
$tablet-large: 768;
$screen-small: 1024;
$screen-large: 1280;

讓我訝異的事情是Sass竟然有支援240px,
現在很少手機在這解析度上了,
768與1024px是iPad的直、橫式解析度,
1280是很熱門的桌上PC螢幕解析度。

**Github**
Github的CSS也是使用SCSS來設計的,
另外樣式表文件則是使用KSS來撰寫,
KSS是只要在SCSS檔案上寫符合KSS規範的註解,
就能額外編譯出樣式表格式的HTML檔案出來提供網頁設計師參考。

擷取部分我覺得不錯的撰寫風格:
1.統一用兩個空白來作推進
2.冒號後面加一個空格 ( color: #fff )
3.中括號前面加一個空格 ( .header {} )
4.用//來取代/**/ 註解
5.不要將@import架構擴展到三層以上
6.公用的變數與@mixin放在global資料夾。
7.使用顏色變數時用hex color#000,除非是使用rgba()
8.再來Github的SCSS結構長得像是如下:

styles
├── components
│   ├── comments.scss
│   └── listings.scss
├── globals
│   ├── browser_helpers.scss
│   ├── responsive_helpers.scss
│   └── variables.scss
├── plugins
│   ├── jquery.fancybox-1.3.4.css
│   └── reset.scss
├── sections
│   ├── issues.scss
│   └── profile.scss
└── shared
    ├── forms.scss
    └── markdown.scss

components是網頁上的組件,globals是全域設定,
所以可看到裡面會有variables,plugin有點像是Smacss的vendor,
意思是則第三方的插件所帶來的CSS設定,例如jquery動畫、css framework,
sections是針對每個頁面產生各別客製化的SCSS檔。

值得一提的是Github有設計兩種版本CSS,
各別是給IE9以上跟以下的使用者看的。

Class naming conventions
CSS樣式都寫在前綴is-上,不會寫到js-上面,例:<img class="js-img" />,
這樣才不會導致你在修改CSS與HTML 結構時,不小心動到js的設定。

Specificity (classes vs. ids)
Github有使用ID來設定樣式,
這裡它有強調ID要確定在頁面上只會顯示一個區塊才可以使用,
像是header表頭或footer表尾,否則都是用class。

**Codepen**
Codepen是一個線上網路寫程式碼的服務,
在最近也支援了Susy這個Framework,
我們也來看看它們的CSS寫法,
有些內容我看不懂意思就直接提供英文內容了。

1.使用SCSS
2.使用Autoprefixer(是一個瀏覽器前綴兼容plugin,在sublime上也有)
3.使用 Rails Asset Pipeline(JS與CSS壓縮工具)
4.The SCSS file that represents the CSS file that actually gets loaded is just a table of contents.
5.codepen有一個風格樣式,但大多數只是因為一致性看起來不錯
6.不用任何特別的結構,除了use classes a bunch ”以外
7.在每個頁面上只會使用2~3個CSS檔案
8.是使用@mixin來寫RWD效果,以方便隨時關閉。
9.有在程式碼裡面使用註解
10.一些統計數據
11.CSS部分只有作者一人來設計,總共三人合作開發
12.What the future might be like for us.

在codepen上,作者有使用這些 Sass功能:

1. @import
2. @mixin
3. nesting
4. variables
5. @extend
6. math
7. loops

作者提到說以前他也是有在用Compass,
但後來發現它也只有在用CSS3 Mixin的功能,
所以後來就改用使用Autoprefixer,
因為他不希望一堆@include都是為了前綴。

Codepen的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)

比較特別的地方是作者把Layout的區塊放在area,
將表頭與表尾的設計獨立成一個scss檔案,
針對文字排版(typography)、表單、modals、按鈕有個別作設定。
另外作者提到有時候會因為一些意外狀況,
所以設計了一個shame的scss檔案,將程式碼暫時放在這裡:

@import "shame";

這個想法其實在MVCSS的inbox還挺像的,
inbox的觀念是如果有還不是很了解團隊Sass結構的人,
可以先將css寫在inbox的CSS區塊裡面,
之後再整理到規範文件裡面。

另外較有趣的數據是,codepen總共有160個獨立SCSS文件,
但作者從來不怕找不到檔案,因為sublime有很強大的搜尋功能。
最後提供codepen scss檔案的容量大小:

  1. SCSS文件共13345行
  2. global.css文件11.8k
  3. page.css文件5.5k
  4. editor.css文件6.2k

除此之外codepen下方還有針對撰寫風格、Media Queries做詳細的解說,有興趣的朋友可以再到最上面的連結瀏覽。


上一篇
Sass教學 (42) - SMACSS - 結構規劃與其它補充
下一篇
Sass教學(44) - Sass教學手冊導讀
系列文
Sass3.3 & CSS設計模式46

尚未有邦友留言

立即登入留言