設計稿分析與Class命名

切版的前置作業

設計稿交付工具-Figma

我們推薦使用Figma來做設計交付，作為目前主流的UI設計與交付工具，Figma他不受限於作業系統，只需要有網路與一組帳號，就能在雲端同步、共享檔案，也能支援多人即時協作。

內建的Prototype提供動態轉場功能且能快速輸出分享，便於使用者測試和調整迭代。

在正式進入切版前...

釐清任務與需求
網站地圖與流程
從設計稿上獲取需要的資訊並規劃HTML架構與佈局。
了解瀏覽器版本需求與外掛功能測試
時程安排
無障礙規劃

01.Design Guideline

給設計師與開發人員明確的準則，開發人員能夠從此獲得網站的色系、字級、字型、icon及互動反饋的規範，維持網站的一致性，目前IOS系統可以參考Human Interface Guidelines ，Andriod系統則可以參考Material Design

Piman無障礙框架也有在figma的Community上公開的Design System，而Piman的使用方式可以至官網查看技術文件。

02.Layout

透過設計稿與Design Guideline，我們可以開始規劃ＨＴＭＬ架構與佈局，網頁的佈局與常用排版技巧，下一章在進行實際講解。

03.Component

盤點設計稿中重複的元件，常見元件：Header、Footer、Searchbar 、Sidebar，通常UI設計工具也有component的概念，因此也可參考設計稿上的component。

04.Class命名

雖然class的命名沒有對錯，但好的命名會有助於css管理與使用，常見的class命名風格有BEM、OOCSS和SMACSS。

BEM

以區塊（Block）、元素（Element）和修飾子（Modifier）來命名，優點是以元件觀念進行開發，具有重用性。

/* 區塊：menu*/
<ul class="menu">
  /* 元素：menu__item*/ 
  <li class="menu__item">首頁</li>
  /* 修飾子：menu__item--active*/ 
  <li class="menu__item menu__item--active">關於我</li>
  <li class="menu__item">分類</li>
</ul

Element 使用雙底線做分隔，Modifier 使用雙 dash 做分隔。

OOCSS 全名是Object Orientied CSS，是在 2008 年的時候由網頁工程師 Nicole Sullivan 提出的！他的核心概念有兩個如下，OOCSS命名的所有的class都有自己的功能。

The separation of “structure” from “skin”
結構與樣式分離，結構像是元素的大小，樣式像是顏色等。
The separation of “container” from “content”
內容與容器分離，分離HTML與CSS，指盡量將可共用的樣式單獨抽離出來給class。

.btn {
  margin: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 16px;
}
.btn-success {
  background-color: green;
  color: white;
}
.btn-warning {
  background-color: orange;
  color: white;
}
.btn-danger {
  background-color: red;
  color: white;
}