20160513

1. KGI 系統開發經驗分享
Author : Arthur KO
Date : 2016/05/13

2. Agenda
<前端UI>
CSS 簡介
CSS Example 開發案例
Bootstrap3 平台格線系統套用問題
HTML & CSS Coding Spec 撰寫規範
結論
Q & A

3. CSS 簡介 – 1 CSS選擇器
1. 元素選擇器 ( xxx )
2. 分組選擇器 ( xxx , xxx , xxx )
3. 類別選擇器 ( html element attr name: class ) ( .xxx )
4. ID選擇器 ( html element attr name: id ) ( #xxx )
5. 屬性選擇器 ( xxx[xxx] )
6. 後代選擇器 ( xxx xxx )
7. 子元素選擇器 ( xxx > xxx )
8. 兄弟選擇器 ( xxx + xxx )
9. …
↗

4. CSS 簡介 – 2 CSS樣式語法
HTML ELEMENT內的CSS語法撰寫
HTML STYLE TAG內的CSS選擇器撰寫

5. CSS 簡介 – 3 CSS 樣式套用規則
• 1. CSS樣式套用規則為向下繼承
• 2. CSS樣式套用優先順序如下：
CSS語法宣告 !important
Html頁面元素內設定的style=“XXX:XXX”屬性css樣式
頁面內標籤<style></style>設定的css屬性 ( id > class )
@import 載入外部CSS
最高
最低

6. CSS Fail Example - 1
單一頁面使用”table”, ”td”
共用標籤元素, 作個別的樣
式設定。
※所有在經過這個頁面後
的HTML “table”, “td”標籤
都會套用上

7. CSS Fail Example - 2
.nav-tabs, .search_box
套用單一頁面需要的
設定在官方元件名稱
底下，
將套用到所有系統經
過這個頁面後的頁面
設定。
.ngdialog 為angularJS
Dialog元件共用樣式名
稱, 經過這個CSS設定套
用後, 所有之後開啟
的.ngdailog開啟位置將
被定位上移150px。

8. Bootstrap3 格線系統平台套用問題 - 1
上下頁面區塊不對齊
交易內頁需對齊

9. Bootstrap3 格線系統平台套用問題 - 2
Bootstrap3 使用.container或作為格線系統的容器, 以.row(列) ， .col-(欄) 控
制.container內部的流動變化與佈局，最大的功能就是在於切版時版面的控制。
簡單說明.container內格線系統是以一個row(列)上劃分12格欄位來計算版面，
而欄有分為四種col-xs, col-sm, col-md, col-bg分別在不同的螢幕解析度下給予設
定的格數，用以達到切版流動控制的功能。

10. Bootstrap3 格線系統平台套用問題 - 3
我們開發階段所遭遇的問題：
1. 我們不懂Bootstarp的格線系統。
→ 於是我們直接套用美工spec。
2. 美工人員不清楚系統平台的真正架構，頁面中交易程式的部分以
整頁為格數設計。
→ 結果成了以整頁的寬度格數去計算的方式直接套用在完全不同
的架構和不同寬度基礎的平台頁面，並未考量到各方面平台設計的
寬度細部調整與框架頁內嵌頁面的範圍。

11. CSS Coding Spec 撰寫規範 - 1
如何看出一個名稱是否為共用樣式的名稱

12. CSS Coding Spec 撰寫規範 - 2
鍵盤按下：
→→↑↗↓
Ctrl + shift + L

13. CSS Coding Spec 撰寫規範 - 3
將個別程式的自訂樣式命名為不衝突的選擇器名稱
自訂樣式不用共用名稱命名設定

14. 結論
• 撰寫程式時，應避免易人為失誤的寫法，包括命名。
• 使用名稱或撰寫設定前，應確認使用名稱是否存在、與其影響範
圍。
• 養成習慣撰寫程式撰寫註解，為日後自己或他人維護著想。
• 實務上使用美工樣本應當做SPEC開發，而非直接套用。

15. Q & A