尤川豪   ·  4年前
445 貼文  ·  275 留言

第2課 ── 工程與藝術兼具:追求工藝等級的程式碼風格

第2課 課程目標

認識業界實務上,進階的 html 與 css 程式碼撰寫風格。

第2課 課程內容

除了上一課提到的結構組織問題,你一定也會有的疑惑是,怎樣讓整體程式碼看起來更漂亮呢?

空格該隔幾格呢?要用「 - 」還是「 _ 」呢?該不該用大小寫呢?

這些是我們稱之為「coding style」、「coding standard」的東西!

這些絕對都是主觀的問題,但你應該盡量學習業界常用的慣例、用廣泛被認可的寫法!

今天與你介紹值得學習的兩款!

Google HTML/CSS Style Guide

https://google.github.io/styleguide/htmlcssguide.html

Code Guide by @mdo

http://codeguide.co/

請閱讀這兩份文件,熟悉這些常用的程式碼風格!

不同文件可能會提到不同的作法與習慣,把你認為有道理、值得學習的地方學起來即可!

注意:內容很多,請不用全讀,也不用全讀懂!只要把你有興趣的部份看過、消化進去即可!

第2課 作業

上一課做了兩份作業,一個首頁,一個文章頁面。都只有做粗略區塊而已。

這一次請使用本課學到的技巧,做完這兩個頁面,把真的頁面做出來!

幾則注意事項:

  • 這兩個頁面內容很多,也有很多重複的東西,不用全部做完,做到你覺得已經滿熟練,開始有點重複、無聊即可
  • 根據本課的程式碼風格文件,把你能應用的部份用上即可,不用完全遵循文件

做完之後,你應該會發現你的 html/css 程式碼,看起來漂亮很多!不像是完全新手寫出來的東西!

完成這些,你就完成這次的課程目標了!

  分享   共 835 次點閱
共有 0 則留言
還沒有人留言。歡迎分享您的觀點、或是疑問。
您的留言