前端攻略-從路人甲到英雄無敵，路人甲英雄無敵

前端攻略-從路人甲到英雄無敵，路人甲英雄無敵

記得那年，我初學前端，遇見了很多的文章，在浩瀚的知識海洋裡我手足無措，不知從何開始。己所不欲，勿施於人。這篇文章就會幫你去遨遊前端學習的海洋，主要包含了在我之前的學習過程中整理的一些資源和一些感悟。我打算將整篇文章切分為兩部分，第一部分重溫HTML與CSS的基本知識，第二部分概括JavaScript、前端架構與設計模式。

HTML 與 CSS基礎

前端的領域裡，任何東西都離不開HTML 與 CSS。HTML與CSS基本上控制了你看到的所有東西，HTML用來定義內容而CSS負責樣式與布局。

首先從HTML 以及 CSS 開始，這裡推薦的是MDN的官方指南。MDN對於重要的HTML與CSS內容進行了詳細條理的闡述，除此之外，每一章都是單獨的一頁，提供了在CodePen與JSFiddle展示的Demo。

看完了這些基礎教程之後，可以來看看由CodeAcademy提供的tMake a Website系列課程。這個課程只要幾個小時就能看完，如果你想要更多的鍛煉，可以瞅瞅CSS Diner，這是一個CSS挑戰的小遊戲。

最後，可以看看怎麼使用 Google Fonts，參考下 CSSTricks出的Basics of Google Font API。

國內用不了Google Fonts的話可以參考下FontAwesome，如果你要用中文字型的話建議參考FontSpider，請自行Github搜尋。

Typography--排版也是個構建介面時候很重要的部分，有時間的話推薦你看看Donny Truong寫的Professional Web Typography這本書，它會教你基本上關於排版的所有東西。在學習這些的時候不要太擔心自己會忘了，反正記不住。你應該著重於記錄這些並且理解HTML和CSS是怎麼工作的。

Practicing HTML and CSS Basics

到這裡你應該已經明白了HTML與CSS的基本使用，下面我們要學以致用了。這一部分就設計了兩個小實驗來讓你自己動手構建網站與介面。我是把它們形容成實驗，所以不要害怕失敗。

第一個實驗裡，我們用的是CodePen，一個線上的HTML與CSS實驗台。同時也提供了即時預覽功能，一石二鳥呦。好了，下面我們要看看我們做的介面的原型了，轉到 Dribbble吧, 這嘎達可全是設計創意啊。
我是看上了這個系列：1, 2, 3, 4, 以及 5.。我選擇了一個移動優先的設計是因為與案頭設計相比更簡單一點，不過你也可以自己找一個。

在你選定了設計之後，就可以在CodePen上面開始動手了。你也可以看看其他人設計的Pen： pens on CodePen點擊預覽. 另外，別忘了StackOverflow ，這可是你的小夥伴呦。如果你最後實現的東西跟設計相去甚遠，也不要灰心，不斷嘗試總會提高的。

Experiment 2

經過實驗一估計你已經有點自信了，在實驗二裡面我們將會先借鑒一些大公司的經典網站。有不少網站會用一些CSS架構或者混淆它們的CSS類名，這會讓原始碼的閱讀比較麻煩，這嘎達我列舉了幾個原始碼可讀性比較好的：

• Dropbox for Business: Try replicating their hero section

• AirBnB: Try replicating their footer

• PayPal: Try replicating their navigation bar

• Invision: Try replicating their signup section at the bottom of the page

• Stripe: Try replicating their payments section

再次強調下，實驗二的目的並不是讓你去重構整個頁面，而是知道怎麼去分割組件以及人家是怎麼做的。如果你沒有設計的背景，可能你要好好發掘下你的潛能了。一個優秀的前端開發人員要能夠辨別好的設計然後完美地重現它們。

你可以選擇線上編程：CodePen 或者直接本地開發。如果你選擇本地做，那你可以使用這個 模板項目 。我推薦是使用Atom 或者Sublime這樣的編輯器。另外，對於Firefox或者Chrome內建的控制台與開發人員工具也要好好瞅瞅。

HTML and CSS Best Practices

好了，現在你已經能夠用HTML與CSS做一些簡單的事情了，下面就要看看所謂的最佳實務了。最佳實務實際上就是一系列的在日常開發中總結出來的約定俗成的規範的集合，來讓你更快地開發與構建更高品質的代碼。

Semantic Markup:語義標記
HTML與CSS最佳實務中重要的一條就是怎麼來寫出有語義可讀性的標記。好的語義即是你使用了合適的HTML標籤與CSS的類名來傳達出你想表達的結構含義。
譬如 h1 標籤會告訴我們裡麵包裹的是一些很重要的標題資訊，另一個例子就是*footer *標籤，會直截了當地跟你說，這裡面是包含一些頁尾資訊。建議你閱讀 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。

CSS Naming Conventions

下面一個比較重要的事情就是怎麼給你的CSS定一個合適的類名。好的命名習慣，譬如語義化的標記，可以更好地傳達含義，讓代碼的可讀性與可維護性大大增加。

總體來說，我的建議是跟著你的直覺來確定命名習慣，隨著時間的發展你會覺得這樣看上去很舒服。如果你要看看大公司，譬如Medium是怎麼實踐BEM這樣的命名規範的，可以閱讀 Medium’s CSS is actually pretty f***ing good這篇文章，在這裡你會學到怎麼在一個快速迭代地情況下也維護你的有效地CSS命名習慣。

CSS Reset

不同的瀏覽器在譬如margin以及line-height這些小的樣式點之間存在著一些不一致性，因此你要學會重設你的CSS環境。 MeyerWeb 就是一個常見的重設手段。

Cross Browser Support

跨瀏覽器支援意味著你的代碼要去支援絕大部分的現代瀏覽器，一些常見的CSS屬性，譬如 transition 需要 vendor prefixes 來運行在不同的瀏覽器中。你可以在 CSS Vendor Prefixes這篇文章裡擷取更多的知識。這就意味著你需要花費更多的時間來在不同的瀏覽器之間進行測試。

翻開CSS的曆史，自90年代以來，CSS走過了一段漫長而崎嶇的道路。整個UI系統變得日益繁複，人們也會去選擇使用一些前置處理器或者後處理器來管理這種複雜性。CSS的前置處理器或者CSS語言的擴充會在無聲無息之間提供類似於變數、Mixins以及繼承這些特性。最主要的兩個CSS的前置處理器就是Sass 與 Less。2016年中Sass被越發廣泛地使用，著名的響應式架構BootStrap就是從Less遷移到了Sass。另外，很多人談到SASS的時候也會提到Scss。

CSS後處理器則對於手寫的CSS檔案或者經過先行編譯的CSS檔案進行一些處理，以著名的PostCSS 為例，它有一個外掛程式可以幫你自動地添加一些渲染首碼。
當你接觸過CSS的預先處理與後處理器之後，你會把它們提升到日常伴侶的。不過，過猶不及，像變數和Mixins這些特性不能濫用啊，還是應該在合適的地方使用。

Grid Systems and Responsiveness

網格系統即是用來水平或者垂直地排布元素的CSS架構。

著名的網格架構有Bootstrap, Skeleton, 以及 Foundation，它們提供了用於在布局中進行行列管理的樣式表。這些架構用起來很方便，不過我們也是要理解網格的工作原理，推薦看Understanding CSS Grid Systems 以及 Don’t Overthink Grids。

網格系統另一個目標就是是你的網站具有響應式特性。響應式意味著你的網站可以根據螢幕的大小來動態調整你網站大小與布局。很多時候這個響應式特性都是基於CSS media queries, 即根據不同的螢幕大小選用不同的CSS樣式規則。

另外，因為我們進行中一場所謂mobile-first變革，推薦你看下An Introduction to Mobile-First Media Queries。

Practicing HTML and CSS Best Practices

恭喜道友，築基成功，你已經能夠瞭解一些關於HTML與CSS的最佳實務了，下面又到了學以致用的時間。這裡的兩個實驗主要是讓你鍛煉下編寫整潔的代碼和保證長期的可讀性與可維護性。

Experiment 3
實驗3中，你需要選一個你之前自己做的項目並且用上文中提及的最佳實務去重構它們，從而保證你的代碼更易讀並且更簡潔。掌握如何有效地重構代碼是前端開發人員的一個重要技能。當然，寫出高品質的代碼並非一蹴而就，而是需要一個長期的迭代過程，CSS Architectures: Refactor Your CSS這篇文章就是一個不錯的學習起點。

當你決定要重構代碼之前，你要先捫心自問以下幾點：

• 你的類名定義是不是模糊不清的，6個月之後你還能否明白你類名的意義。

• 你的HTML與CSS是否足夠語義化，一眼望去是否就能明白你的代碼架構與關係意義？

• 你是否N次的重複使用了相同的顏色代碼，別忘了可以用Sass variable。

• 你的代碼是否能夠在Safari與Chrome都能正常運行？

• 能否用像Skeleton這樣的網格架構來代替你自己的布局?

• 你是不是經常使用了!important
  ?

Experiment 4
最後一個實驗是一個大雜燴，把前面講的所有知識都混雜起來。不過要知道的是，上面講的很多最佳實務在一個草稿或者小型項目裡難見分曉，只有在大項目裡才能顯露崢嶸。
因此，最後一個項目我是建議建立一個自己的作品剪輯網站，作為一個前端開發人員，個人網站就是自己的電子名片。這裡會展示你的作品與項目的積累，也是一個回溯你發展的進程與開發履曆的地方。

可以參考Adham Dannaway的文章 My (Simple) Workflow To Design And Develop A Portfolio Website來從零開始。
Stay current
當HTML與CSS已經是小菜一碟，你就算是進入了前端開發人員的殿堂，一個不斷髮生改變的地方。

【有一個前端學習交流QQ群：328058344  如果你在學習前端的過程中遇到什麼問題，歡迎來我的QQ群提問，群裡每天還會更新一些學習資源。禁止閑聊，非喜勿進。】