我們如何從網頁設計中學到借鏡
現在很多人會使用網頁設計框架進行快速建站。
那網頁設計框架是什麼呢，它通常是一些網頁設計檔的集合，這些檔包括基本佈局、表單樣式、網格、簡單元件、以及樣式重置。使用網頁設計框架大大降低工作成本進行快速建站。
當然對於一些大型的專案，可能會很難照搬某些框架直接使用的，因為直接使用會帶來一些限制或者冗餘的問題。
但在網頁設計框架已經日趨成熟的今天，在我們設計專案架構、規範的時候，現時市面上一些優秀的框架也可以給我們提供很多可借鏡的地方。
但在網頁設計框架已經日趨成熟的今天，在我們設計專案架構、規範的時候，現時市面上一些優秀的框架也可以給我們提供很多可借鏡的地方。
本文主要從幾個方面討論網頁設計框架可以對我們項目的借鏡點：
1. 目錄組織
2. 網頁設計規範
3. 圖形
4. 應用方式
5. 小建議
1. 目錄組織
在目錄組織的分析上我們參考了 Bootstrap, Blueprint, Yui, Yaml 四個框架的組織方式
當使用一個框架時，我們一般會把所需框架本身的樣式鏈到頁面中，然後在它的基礎上進行修改。所以框架本身所帶的樣式可以理解為基礎樣式。即我們平時所說的全局樣式+元件樣式。
可以看到，在目錄架構上4個框架基本都是遵循基本樣式+用戶定義擴展樣式的常規方式進行組織。
然而，如果按 Bootstrap 做法的話，可能會出現把不常用元件樣式也包含在全局樣式中一併引入，如果把元件也寫在全局網頁設計中，最好確保該元件出現頻率較高才引入，避免不必要的網路頻寬浪費。
關於 hack：
對於針對低版本瀏覽器所寫的 hack，對它的處理方式，Blueprint 和 Yaml 都是使用單獨引入 hack 檔的形式進行處理，筆者也嘗試過這樣的做法。
個人覺得這種方式的好處是可以避免給高級瀏覽器帶來冗餘程式碼，而且通過條件判斷引入網頁設計也不會給高級瀏覽器帶來額外的請求。
這種方式比較適用于，高低級瀏覽器本來就刻意設計成有較大差別的情況下，即 hack 比較多的時候才使用。不然就為了十來行 hack 而多引入一個檔的話似乎也不太可取。
2.網頁設計規範
a. 首碼
框架中公用模組都有首碼，分別有以下3個思想：
1. Yaml , Yui ：無論如何都是統一的標識開頭，再加上改模組名稱。
2. Bootstrap：直接模組名稱，這方式需要定義關鍵字。公用模組是 button 都以 btn – 開頭， image 則以 img- 開頭。
3. Nec ：單字母開頭來標識元件。
一般來說應用一個框架，我們先引入框架的樣式，再在之上覆蓋上自己的樣式，所以可以把框架看作是我們的基礎CSS。
我們可以借鏡框架的首碼規範來規劃我們的基礎網頁設計首碼，根據自己的專案實際情況採取不同的方案。
b. 類的劃分
類的劃分方式在框架中主要有2種標準，分別為：以【元件為粒度】，和以【屬性為粒度】。
組件為粒度：把元件的所有樣式封裝在一個類名中，調用類名即可使用該元件。
屬性為粒度：需要屬性的時候，調用對應類名拼裝。
在我們日常專案中，以屬性對類名進行劃分比較少見，因為一直遵循的都是“結構、樣式、行為”分離的原則，力求降低三者的耦合度。
然而以這種方式劃分在一些特定情況下也不是完全不可取。
例如對於一些元素的隱藏，如果沒提供相關的類名的話，在js開發階段開發就會直接內聯 style 在對應的元素上（這將會觸發 repaint/reflow），所以更好的方式是和js開發約定一個類名觸發顯示/隱藏的動作，在這種情況下，給 display: none 劃分一個特定的類名，供給開發調用就會顯得很實用了。
所以，更重要的是我們對所在的實際情況進行分析，並給出最佳的解決方案。
c. 元件類名組合方式
元件的樣式，基本都是“基礎類名+擴展類名”的套路來進行組合的變化。
但在選擇符方面可以有3種方式， 目前最多框架使用的是：多類選擇，通過修改 html 的類名組合，實現還原。
以按鈕樣式的實現為例：
這裏採用常規的組合方式，不再贅述。
d. 高級網頁設計選擇器
在對 Bootstrap 進行分析的過程中，發現 Bootstrap 定義了一系列的icon，這些 icon 的類名全部都是以 icon- 為首碼。
而在網頁設計中，Bootstrap 用到了子串匹配屬性選擇器。
[class^="icon-"]
使用這個的好處是，對於 icon 類的標籤，我們再也不需要對其加一個對於 icon 的公用類名，只需要類名是以 icon- 開頭就可以匹配所有 icon ，省了一個類名。
使用這種方式可以降低一定的成本，但是只在 IE7+ 瀏覽器才適用，如果要使用該類選擇器的話請考慮是否需要相容 IE6。
雖然 IE6 不支持，但是高級網頁設計選擇器的確十分吸引，並且可用於移動端，所以特此提一下。
圖形
在參考的網頁設計框架中，它們會提供一些簡單的圖形元素， 但是實現的方式也有彼此不同之處。
但是共同點是，現今較新的框架，對於一些簡單的效果，都會使用 CSS3 實現一些簡單的漸變，對低版本 IE 進行優雅降級。
應用方式
在參考實例是怎樣使用這些框架的方式上，基本和我們平時專案使用方式一致。
在應用方式上，一般有兩種方式。
1. 對於以元件為粒度的樣式：
按照元件的 html 結構來拼合自己的頁面模組，再輔助添加自定義的類名來控制其個性化定義。
2. 對於以屬性為粒度的樣式：
按所需要的樣式對應類名進行拼接。
下面可以看幾個簡單的例子：
1. 以組件為粒度：
對於元件的覆蓋，採取常規的自定義類名覆蓋樣式，此處不再贅述。
2. 以屬性為粒度：
可以看到，若需要樣式是屬性以粒度，即把對應類名調入即可，但是在實際專案中，這種方式由於靈活度不夠，並且沒有做到結構與樣式分離，實際專案中比較少見這種用法。
而對於功能性的動作，例如顯示/隱藏元素，可以靈活使用這種方式，把所需樣式寫到一個特定類名中供給js調用，避免直接寫入 style 導致 reflow/repaint。
5. 小建議
對於目錄組織：
目錄組織——
可以考慮結合 Bootstrap 與 Yaml/Blueprint 的思想。
a .把常用的基礎樣式壓縮合成一個檔。
b. 把不必現元件樣式抽離成單獨 CSS，按需載入。
【優化點】
減少了單個 global_min 檔的大小。
【權衡點】
需要考慮由此可能導致的請求數過多問題。
hack——
根據實際情況，可考慮把針對 IE6 的 hack 檔單獨分出來。
【優化點】
便於對低級瀏覽器的大型差異化處理，並且減少對於高級瀏覽器的冗餘程式碼。
對於網頁設計規範：
CSS 首碼——
可考慮嘗試 Nec 的方式，約定“單字母_xxx”為公用樣式的標識，取消單一的公用首碼，通過以不同字母作為頂級首碼，對公用模組進行劃分。
【優化點】
減免了“公用首碼_元件首碼_元件名”的多級首碼，通過以類名格式作為標識，代替了原來公用首碼的作用。
【權衡點】
仍需按項目實際情況考慮。
類的劃分——
可考慮約定統一幾個功能性的類名（以屬性為粒度的類名），例如元素隱藏的類名，供給js調用。
【優化點】
減免讓開發直接寫 style 內聯 CSS，造成頁面的 reflow/repaint。
高級網頁設計選擇器——
在對移動端頁面進行重構時可以考慮使用更高級的網頁設計選擇器。
例： [class^=”icon”]，:first-child，:nth-child(n)….
【優化點】
相比于傳統的方法，節省類名。
對於圖形：
考慮與設計師約定，視覺效果在可接受範圍內，部分效果使用 CSS3 實現，對低級瀏覽器實現優雅降級。
【優化點】
大量減少圖片的使用，節省網路頻寬以及請求數。
最後
隨著新技術的不斷湧現，越來越多優秀的網頁設計框架出現在我們的眼前，這裏分析覆蓋面有限，未能一一進行對比並深入探索，如有不足之處，敬請大家多多指正交流。
轉貼來源：網頁設計部落格
參考文獻：
1.李青蓉等編著.(1998).人機介面設計，台北縣：空大。
2.邱柏清.(2004).網頁介面愉悅行之研究，國立台灣科技大學設計研究所碩士論文。
3.許峻誠、張恬君、莊明振.(2001).網頁風格認知與設計要素之探討-以企業網站首頁為例，第六屆設計學術研究果研討會論文集。
相關文章
如何依網頁設計的首頁設計經驗更新網頁設計的首頁文案與6個文案要點問題做一個程式設計的自由人思考、學習網頁設計的原則和方式網頁設計師在人們的世界是什麼？
最新文章
HVACKer：入侵隔離網絡的新型攻擊技術還有什麼不會被入侵？路由器 LED 燈已成為攻擊入口美 5 家獨角獸同天申請 IPO 掛牌，最狂的是一家估值 124 億美的數據分析新創！【台灣「智慧產業」開始佈局】緯創集團領投跨國 AI 新創 iKala，下一步拓展東南亞市場快可以用手機遠端遙控你的所有家電了
