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

4,873 views

Published on

0 Comments
16 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,873
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
103
Comments
0
Likes
16
Embeds 0
No embeds

No notes for slide

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

  1. 1. 如何逐步提升CSS的可利用性、模組化講者:廖洧杰高雄前端社群#1
  2. 2. 社群創立緣起
  3. 3. 在高雄沒有管道交流..Orz
  4. 4. 1. 各瀏覽器 CSS BUG2. 元素排版對齊3. know how (Z-index、menu)4. 標準網頁排版流程5. 支援的第三方程式6. 提升排版效率、模組化7. 與工程師合作的細節8. 數百項族繁不及備載..
  5. 5. 過了五年後..
  6. 6. 還是沒有!
  7. 7. 2012/11 CSS課程
  8. 8. 2013/3 RWD課程
  9. 9. 不希望同行走太多冤枉路
  10. 10. 高雄前端社群
  11. 11. PHP、.net、Ruby、Java等後端語言CSSHTML社群討論範圍JS前端後端
  12. 12. 社群討論範圍PC、Mobile網頁排版技術
  13. 13. 舒適圈PC
  14. 14. http://www.slideshare.net/lis186/20130112webconf
  15. 15. Js討論範圍注重動畫UI/UX呈現方式不討論較牽涉後端、重邏輯性的程式寫法
  16. 16. JavaScript.tw每六週固定會來高軟分享JS技術
  17. 17. KSDG高雄軟體開發者社群每月第一週四 meet-up每月第三週六 web course
  18. 18. 如何逐步提升CSS的可利用性、模組化
  19. 19. 1. 養成撰寫習慣2. 如何有效整理程式碼3. Compass+Sass內容大綱
  20. 20. 養成習慣
  21. 21. 養成習慣1. 檔案分類明確2. 命名一致化3. 不要濫用CSS與DIV4. 加強基礎觀念
  22. 22. 1、檔案分類明確
  23. 23.
  24. 24. 檔案分類O
  25. 25. 檔案分類
  26. 26. 2、命名一致化
  27. 27. headercontentfooter第一次
  28. 28. header_topmainfoot第二次
  29. 29. onetwothree初學者
  30. 30. babyyaqq來亂的
  31. 31. 命名一致化關鍵字:CSS命名表頭:header內容:content/container尾:footer導航:nav側欄:sidebar
  32. 32. 3、不要濫用CSS與DIV
  33. 33. .Box{..}.Box_title{..}.Box_content{..}<div class="box"><div class="box_title"></div><div class="box_content"></div></div>濫用範例
  34. 34. .Box{..}.Box h1{..}.Box p{..}<div class="box"><h1></h1><p></p></div>正確版本
  35. 35. 不要濫用CSS與DIV1. 標題:H1、H2、H32. 段落:P3. 列表:ul 、ol、 li4. 其他:img、a、DIV、span關鍵字: HTML 語義化
  36. 36. 4、加強基礎觀念
  37. 37. .header{vertical-align: baseline;position::relative;z-index: 99999;margin:0 auto;float: left;height: auto;…30 line setting}
  38. 38. .button{*overflow :visible;display: visible;*display: inline;line-height: 20px;padding: 4px 12px;…20 line setting}
  39. 39. .button{*overflow :visible;}清除IE7多餘空白;
  40. 40. 加強基礎觀念1. Float排版需用clear清除浮動2. Div為塊狀延伸結構3. CSS繼承觀念4. Position與Z-index圖層觀念5. CSS縮寫觀念6. Padding、margin一致性推擠
  41. 41. 如何有效整理程式碼
  42. 42. 分析網頁元素1. 評估重工作業流程2. UI元素整理(表格、選單、按鈕)3. jQuery熱門交互動畫
  43. 43. 評估重工作業流程
  44. 44. 1. HTML、CSS、JS2. 命名原則(img、class)3. 計算圖片寬高尋找每次開發都會重複撰寫的相同內容
  45. 45. UI元素整理
  46. 46. 1. 表單按鈕2. 多階層式選單3. 麵包屑、網站導覽4. 可參考熱門前端框架(Bootstrap)整理出常用的UI元素
  47. 47. jQuery熱門交互動畫
  48. 48. 1. 圖片輪播動畫2. TAB效果3. 彈跳視窗整理出常用的動畫效果
  49. 49. COMPASS+SASS
  50. 50. 網頁設計師時常遇到的問題
  51. 51. 網頁設計師時常遇到的問題
  52. 52. .Box{..}寫CSS時狂複製貼上
  53. 53. .Box{..}.Box{..}.Box{..}.Box{..}.Box{..}.Box{..}.Box{..}.Box{..}寫CSS時狂複製貼上
  54. 54. .Box h1{..}.Box ul {..}.Box li {..}.Box li a {..}.Box li a i {..}.Box li a em {..}.Box span {..}.Box .box_inside {..}寫CSS時狂複製貼上
  55. 55. 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);
  56. 56. 動輒千萬行CSS,滾到想殺人
  57. 57. 每次都要計算圖片的高寬
  58. 58. 1. 寫CSS時狂複製貼上2. CSS3瀏覽器前綴詞多到懶得打3. 動輒千萬行CSS,滾到想殺人4. 每次都要計算圖片的高寬遭遇瓶頸
  59. 59. Live Demo
  60. 60. CSS3IE又不支援
  61. 61. 動輒千萬行CSS,滾輪滾到想殺人
  62. 62. 1. 圓角:border-radius2. 陰影: box-shadow3. 背景漸層: linear-gradient向下支援IE6
  63. 63. Q&A
  64. 64. Web font
  65. 65. Fire.app
  66. 66. Font Awesome
  67. 67. 議程詢問1. 標準網頁設計(DIV+CSS)2. Sublime-text-23. Sass+compass4. Jquery 動畫教學
  68. 68. Thanks

×