1. 網站套版最 恨 的幾件事
何澤清 TSE-CHING HO
2013/01/13 WEBCONF.TW
Sunday, January 13, 13

2. Sunday, January 13, 13

3. 套版是誰的事？
HTTP://WWW.SLIDESHARE.NET/LIS186/20130112WEBCONF
Sunday, January 13, 13

4. 有⽔水很重要，但不要只會修⽔水管
HTML 5
CSS / SASS / COMPASS
JAVASCRIPT / COFFEESCRIPT
SPRITE IMAGES
WEB FONTS / ICON FONTS
SVG / CANVAS
......
HTTP://CHARACTER.WORKERCN.CN/C/2011/02/09/110209154040128279566.HTML
Sunday, January 13, 13

5. HTTPS://SPEAKERDECK.COM/EVENWU/2012-WEB-TECHNOLOGY-BY-RGBA-GROUP
網⾴頁設計是資訊流的整理
河川整治是很重要的，不然會氾濫成災！
Sunday, January 13, 13

6. CODE FOR SYSTEM
NOT FOR PAGES
SCALABLE AND MODULAR NAMING CONVENTION
ARCHITECTURE FOR CSS
USE CLASS OVER ID
CATEGORIZATION
USE CHILD SELECTOR
BASE (.MENU > LI > A)
LAYOUT APPLY A CLASS WHEN
THE HTML WON’T BE
MODULE PREDICTABLE
STATE DECOUPLE HTML/CSS
THEME
HTTPS://SPEAKERDECK.COM/HLB/MAINTAINABLE-CSS-WITH-SASS-AND-COMPASS
Sunday, January 13, 13

7. ⽅方法濫⽤用是災難的開始
Sunday, January 13, 13

8. 有時候不只是遺尿的問題
沒有 CSS
沒有 CSS REST
沒有 CSS FRAMEWORK
沒有統⼀一的 CSS 命名規則
沒有 NAMESPACE
沒有依樣板⾴頁⾯面將 CSS 獨
⽴立成⼩小檔案
HTTPS://SPEAKERDECK.COM/EVENWU/2012-WEB-TECHNOLOGY-BY-RGBA-GROUP
Sunday, January 13, 13

9. 是包了尿布，還會尿床的問題
沒有 JAVASCRIPT
FRAMEWORK
沒有統⼀一的命名規則
沒有依樣板⾴頁⾯面將
JAVASCRIPT 獨⽴立成⼩小檔案
沒有模組化
沒有 NAMESPACE
沒有 I18N 策略
Sunday, January 13, 13

10. 有時候我只是想套
某個⾴頁⾯面的某個組件
FORM_WIZARD.HTML
HTTP://THEMEFOREST.NET/ITEM/MOONCAKE-RESPONSIVE-ADMIN-TEMPLATE/3138068
Sunday, January 13, 13

11. 看起來很有條理
Sunday, January 13, 13

12. 其實是個災難
⼀一堆跟樣板⾴頁⾯面
不相干的 CSS
Sunday, January 13, 13

13. 即使是 EMPTY ⾴頁⾯面
還是災難
EMPTY.HTML
Sunday, January 13, 13

14. 別忘了 JAVASCRIPT 也有同樣問題
FORM_WIZARD.HTML EMPTY.HTML
這些都⽤用得到？
別亂放外掛！
Sunday, January 13, 13

15. Sunday, January 13, 13

16. 要怎樣才不會被幹到爆呢？
考量應⽤用程式⼯工程師的使⽤用者經驗！
Sunday, January 13, 13

17. 設計師，如果能夠
遵循被社群接受的法則
⼀一定要有 EMPTY.HTML ⽤用來單純套 LAYOUT 版⾯面
每個樣板⾴頁⾯面都有獨⽴立、專屬的 CSS / JAVASCRIPT 檔案們
每個組件的 CSS / JAVASCRIPT 檔案都能獨⽴立存在、⽅方便組裝
組件請以某⼀一個 CONTAINER 為單位（.WIZARD）
設計師也是要注重 ASSETS 的維護性
注意 3 PARTY 套件的版本差異
Sunday, January 13, 13

18. 其實我只是想舒坦地套個版
Sunday, January 13, 13

19. 梗都是別⼈人的，這就是套版。
最幹的就是套不進去！
Sunday, January 13, 13

20. DEFINED? ME
何澤清 Tse-Ching Ho
twitter: @tsechingho
https://github.com/
tsechingho
Ruby, Rails, NoSQL
⽣生物資訊與醫療系統
Sunday, January 13, 13