KGI 系統開發經驗分享Author : Arthur KODate : 2016/05/13

Agenda< 前端 UI>CSS 簡介

CSS Example 開發案例Bootstrap3 平台格線系統套用問題HTML & CSS Coding Spec 撰寫規範結論

Q & A

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. …

↗

CSS 簡介 – 2 CSS 樣式語法HTML ELEMENT 內的 CSS 語法撰寫

HTML STYLE TAG 內的 CSS 選擇器撰寫

CSS 簡介 – 3CSS 樣式套用規則• 1. CSS 樣式套用規則為向下繼承• 2. CSS 樣式套用優先順序如下：

CSS 語法宣告 !importantHtml 頁面元素內設定的 style=“XXX:XXX” 屬性 css 樣式頁面內標籤 <style></style> 設定的 css 屬性 ( id > class )@import 載入外部 CSS

最高

最低

CSS Fail Example - 1

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

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

Bootstrap3 格線系統平台套用問題 - 1

上下頁面區塊不對齊

交易內頁需對齊

Bootstrap3 格線系統平台套用問題 - 2

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

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

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

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

CSS Coding Spec 撰寫規範 - 3

將個別程式的自訂樣式命名為不衝突的選擇器名稱

自訂樣式不用共用名稱命名設定

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

Q & A