設計稿分析與Class命名

切版的前置作業

Previous常用 Props（下）Next排版技巧

Last updated 7 months ago

設計稿分析與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;
}

我們可以看到btn 這一個 class 是用來管理button的結構，包含 padding 、border 、font-size等等，不同使用情境有不同樣式的，就再使用一個 class 來寫。

透過組合class而產生多種樣式結構，讓code可以更精簡、便於管理與維護。

參考範例：Bootstrap。

SMACSS

全名為Scalable and Modular Architecture for CSS，中文意思是可以擴展且模組化的 CSS 架構。而SMACSS主要核心架構如下

Base：屬於網站的基礎架構，概念與 CSS Reset 類似，賦予整個網頁的預設初始樣式，進而減少重複的預設樣式。
Layout：常會搭配html的佈局元素，如header，footer，section…
Moudule：可重複使用的模組，可各自單獨存在的元件，如導覽列，輪播，對話框…
State：動詞狀態，表現使用者在網頁上觸發了什麼動作或特效。
Theme：較不常使用，常見的例子如dark mode。

命名方式除了上述介紹的三種外，也可以依自身經驗或是參考開發團隊內部的寫法。

小結

拿到設計稿後要如何看懂與拆解頁面到網站結構的規劃都是切版的重要的前置作業，大家可以多加練習。

作業

請找一個現有網站或設計稿練習拆解出頁面的架構並練習class的命名。

參考資料

Previous常用 Props（下）Next排版技巧

Last updated 7 months ago

設計稿交付工具-Figma

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

在正式進入切版前...

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

01.Design Guideline

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 做分隔。

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;
}

我們可以看到btn 這一個 class 是用來管理button的結構，包含 padding 、border 、font-size等等，不同使用情境有不同樣式的，就再使用一個 class 來寫。

透過組合class而產生多種樣式結構，讓code可以更精簡、便於管理與維護。

參考範例：Bootstrap。

SMACSS

全名為Scalable and Modular Architecture for CSS，中文意思是可以擴展且模組化的 CSS 架構。而SMACSS主要核心架構如下

Base：屬於網站的基礎架構，概念與 CSS Reset 類似，賦予整個網頁的預設初始樣式，進而減少重複的預設樣式。
Layout：常會搭配html的佈局元素，如header，footer，section…
Moudule：可重複使用的模組，可各自單獨存在的元件，如導覽列，輪播，對話框…
State：動詞狀態，表現使用者在網頁上觸發了什麼動作或特效。
Theme：較不常使用，常見的例子如dark mode。

命名方式除了上述介紹的三種外，也可以依自身經驗或是參考開發團隊內部的寫法。

小結

拿到設計稿後要如何看懂與拆解頁面到網站結構的規劃都是切版的重要的前置作業，大家可以多加練習。

作業

請找一個現有網站或設計稿練習拆解出頁面的架構並練習class的命名。