切版的自我檢查清單

這陣子在好想工作室的環境中學習，讓自己在切版的觀念上又有更扎實的觀念，也在這段過程中整理了一些關於應該要注意的細節，當作一份檢查清單使用。 而這份清單會伴隨自己的學習而不斷更新。

• 記住容器和元素之間的關係：

• 元素和元素之間的關係

  • 決定使用的是padding or margin

• 任何引入到html的檔案順序

  • ex: css引入順序會決定css的權重問題
  • ex2:js的引入順序會決定js的程式執行問題

• 對於經過再次修改的區塊

  • 必須要確認和設計稿是否能有高程度的符合

• 撰寫時思考所使用的技巧維護性是否夠彈性

• 如果沒有設計稿(手機/電腦)，也要先思考過版面的配置在撰寫，避免回過頭需要花費太多時間重構架構

  • 寧願在思考上多花點時間，也不要在重構上花費太多時間
  • 需要做確認的部分就花時間做確認

• RWD 響應式網頁

  • 網頁重點在於網頁內容的資訊在於較小的裝置上能否有效的呈現，且使用者體驗是流暢、舒服的
  • 版面配置切換時，盡量保持斷點在切換時版面配置是有一致性，避免某個斷點有過於突兀的版面切換，視覺上比較流暢
  • RWD不能只檢查直立時的頁面是否有問題，也要檢查水平的時候是否也是正常
  • 因為可讀性，所以將@media設定的程式碼放在對應的原程式碼底下，在修改及維護上會更加直觀、快速

• 字與字、行與行、元素與元素之間的距離，站在使用者的角度考量

• 替程式碼命名

  • 詞性很重要，可以幫助命名能力的提升
  • 命名就是一個短註解，設定上要能讓開發者快速了解用意

• 相較起來最遵從規範開發的瀏覽器

  • firebox

• 以模組化的概念切版，讓每個區塊都可以獨自正常運作。(在程式上這個觀念更為重要)

• 若是遇到不懂的部分，找尋相關規範的相關定義了解原理並記錄起來，以免日後為了重複問題又耗費過多時間。