1. 如何逐步提升CSS的可利用性、模組化
講者：廖洧杰
高雄前端社群＃1

2. 社群創立緣起

3. 在高雄
沒有管道交流..Orz

4. 1. 各瀏覽器 CSS BUG
2. 元素排版對齊
3. know how (Z-index、menu)
4. 標準網頁排版流程
5. 支援的第三方程式
6. 提升排版效率、模組化
7. 與工程師合作的細節
8. 數百項族繁不及備載..

5. 過了五年後..

6. 還是沒有！

7. 2012/11 CSS課程

8. 2013/3 RWD課程

9. 不希望同行
走太多冤枉路

10. 高雄前端社群

11. PHP、.net、
Ruby、Java等
後端語言
CSS
HTML
社群討論範圍
JS
前端後端

12. 社群討論範圍
PC、Mobile網頁排版技術

13. 舒適圈
PC

14. http://www.slideshare.net/lis186/20130112webconf

15. Js討論範圍
注重動畫UI/UX呈現方式
不討論較牽涉後端、重邏輯性的程式寫法

16. JavaScript.tw
每六週固定會來高軟分享JS技術

17. KSDG
高雄軟體開發者社群
每月第一週四 meet-up
每月第三週六 web course

18. 如何逐步提升CSS的
可利用性、模組化

19. 1. 養成撰寫習慣
2. 如何有效整理程式碼
3. Compass+Sass
內容大綱

20. 養成習慣

21. 養成習慣
1. 檔案分類明確
2. 命名一致化
3. 不要濫用CSS與DIV
4. 加強基礎觀念

22. １、檔案分類明確

23. Ｘ

24. 檔案分類
O

25. 檔案分類

26. ２、命名一致化

27. header
content
footer
第一次

28. header_top
main
foot
第二次

29. one
two
three
初學者

30. baby
ya
qq
來亂的

31. 命名一致化
關鍵字：CSS命名
表頭：header
內容：content/container
尾：footer
導航：nav
側欄：sidebar

32. 3、不要濫用CSS與DIV

33. .Box{..}
.Box_title{..}
.Box_content{..}
<div class="box">
<div class="box_title"></div>
<div class="box_content"></div>
</div>
濫用範例

34. .Box{..}
.Box h1{..}
.Box p{..}
<div class="box">
<h1></h1>
<p></p>
</div>
正確版本

35. 不要濫用CSS與DIV
1. 標題：H1、H2、H3
2. 段落：P
3. 列表：ul 、ol、 li
4. 其他：img、a、DIV、span
關鍵字： HTML 語義化

36. ４、加強基礎觀念

37. .header{
vertical-align: baseline;
position:：relative;
z-index： 99999;
margin:0 auto;
float： left;
height: auto;
…30 line setting
}

38. .button{
*overflow ：visible;
display： visible;
*display: inline;
line-height: 20px;
padding: 4px 12px;
…20 line setting
}

39. .button{
*overflow ：visible;}
清除IE7多餘空白;

40. 加強基礎觀念
1. Float排版需用clear清除浮動
2. Div為塊狀延伸結構
3. CSS繼承觀念
4. Position與Z-index圖層觀念
5. CSS縮寫觀念
6. Padding、margin一致性推擠

41. 如何有效整理程式碼

43. 分析網頁元素
1. 評估重工作業流程
2. UI元素整理(表格、選單、按鈕)
3. jQuery熱門交互動畫

44. 評估重工作業流程

45. 1. HTML、CSS、JS
2. 命名原則(img、class)
3. 計算圖片寬高
尋找每次開發都會重複撰寫的相同內容

46. UI元素整理

47. 1. 表單按鈕
2. 多階層式選單
3. 麵包屑、網站導覽
4. 可參考熱門前端框架(Bootstrap)
整理出常用的UI元素

50. jQuery熱門交互動畫

51. 1. 圖片輪播動畫
2. TAB效果
3. 彈跳視窗
整理出常用的動畫效果

54. COMPASS+SASS

55. 網頁設計師時常遇到的問題

56. 網頁設計師時常遇到的問題

57. .Box{..}
寫CSS時狂複製貼上

58. .Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
.Box{..}
寫CSS時狂複製貼上

59. .Box h1{..}
.Box ul {..}
.Box li {..}
.Box li a {..}
.Box li a i {..}
.Box li a em {..}
.Box span {..}
.Box .box_inside {..}
寫CSS時狂複製貼上

60. CSS3瀏覽器前綴詞多到懶得打
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);

61. 動輒千萬行CSS，滾到想殺人

62. 每次都要計算圖片的高寬

63. 1. 寫CSS時狂複製貼上
2. CSS3瀏覽器前綴詞多到懶得打
3. 動輒千萬行CSS，滾到想殺人
4. 每次都要計算圖片的高寬
遭遇瓶頸

65. Live Demo

66. CSS3
IE又不支援

67. 動輒千萬行CSS，滾輪滾到想殺人

68. 1. 圓角：border-radius
2. 陰影： box-shadow
3. 背景漸層： linear-gradient
向下支援IE6

69. Ｑ＆Ａ

70. Web font

71. Fire.app

72. Font Awesome

73. 議程詢問
1. 標準網頁設計(DIV+CSS)
2. Sublime-text-2
3. Sass+compass
4. Jquery 動畫教學

74. Ｔｈａｎｋｓ