摘要：整個系統變得日益繁復，人們也會去選擇使用一些預處理器或者后處理器來管理這種復雜性。的預處理器或者語言的擴展會在無聲無息之間提供類似于變量以及繼承這些特性。最主要的兩個的預處理器就是與。

本文的 Github Repo
本文翻譯自 FreeCodeCamp 的 from-zero-to-front-end-hero-part。
本文的第二部分：這里

譯者的廢話，不感興趣的直接忽略

前兩天才翻譯了一篇文章：解決你的前端面試，這類型的文章都是關于前端的一些基礎知識的，不過文章里的鏈接都是外文資料，更多的會學習的是思想吧和知識點列表。對于前端，或者更廣泛的說的客戶端開發的知識點圖譜還是推薦下這個。筆者打算先寫完 React+Redux+Webpack的系列筆記和實戰 然后就把這些學習鏈接看看整理找一些中文的或者自己整理一些放出來，不過估計應該也有大神寫了現成的，歡迎分享給我。

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

前端的領域里，任何東西都離不開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是怎么工作的。

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

第一個實驗里，我們用的是CodePen，一個在線的HTML與CSS實驗臺。同時也提供了實時預覽功能，一石二鳥呦。好了，下面我們要看看我們做的界面的原型了，轉到 Dribbble吧, 這嘎達可全是設計創意啊。

我是看上了這個系列：1, 2, 3, 4, 以及 5.。我選擇了一個移動優先的設計是因為與桌面設計相比更簡單一點，不過你也可以自己找一個。

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

經過實驗一估計你已經有點自信了，在實驗二里面我們將會先借鑒一些大公司的經典站點。有不少站點會用一些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

再次強調下，實驗二的目的并不是讓你去重構整個頁面，而是知道怎么去分割組件以及人家是怎么做的。如果你沒有設計的背景，可能你要好好發掘下你的潛能了。一個優秀的前端開發者要能夠辨別好的設計然后完美地重現它們，可以參考下我的這篇文章：develop your design eye.

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

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

HTML與CSS最佳實踐中重要的一條就是怎么來寫出有語義可讀性的標記。好的語義即是你使用了合適的HTML標簽與CSS的類名來傳達出你想表達的結構含義。

譬如 h1 標簽會告訴我們里面包裹的是一些很重要的標題信息，另一個例子就是footer 標簽，會直截了當地跟你說，這里面是包含一些頁腳信息。建議你閱讀 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。

下面一個比較重要的事情就是怎么給你的CSS定一個合適的類名。好的命名習慣，譬如語義化的標記，可以更好地傳達含義，讓代碼的可讀性與可維護性大大增加。你可以瞅瞅OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?這篇文章里提及的CSS的一些命名的習慣。

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

不同的瀏覽器在譬如margin以及line-height這些小的樣式點之間存在著一些不一致性，因此你要學會重置你的CSS環境。 MeyerWeb 就是一個常見的重置手段，如果你想深入了解下，推薦你閱讀 Create Your Own Simple Reset.css File這篇文章。

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

翻開CSS的歷史，自90年代以來，CSS走過了一段漫長而崎嶇的道路。整個UI系統變得日益繁復，人們也會去選擇使用一些預處理器或者后處理器來管理這種復雜性。CSS的預處理器或者CSS語言的擴展會在無聲無息之間提供類似于變量、Mixins以及繼承這些特性。最主要的兩個CSS的預處理器就是Sass 與 Less。2016年中Sass被越發廣泛地使用，著名的響應式框架BootStrap就是從Less遷移到了Sass。另外，很多人談到SASS的時候也會提到Scss，你可以參考 whats-difference-sass-scss這篇文章。

CSS后處理器則對于手寫的CSS文件或者經過預編譯的CSS文件進行一些處理，以著名的PostCSS 為例，它有一個插件可以幫你自動地添加一些渲染前綴。

當你接觸過CSS的預處理與后處理器之后，你會把它們提升到日常伴侶的。不過，過猶不及，像變量和Mixins這些特性不能濫用啊，還是應該在合適的地方使用（譯者注：此言非常有理）。還是推薦下Medium’s CSS is actually pretty f*ing good這篇文章。

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

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

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

你可以看一下 Intro to Media Queries來了解更多。另外，因為我們正在進行一場所謂mobile-first變革，推薦你看下An Introduction to Mobile-First Media Queries。

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

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

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

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

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

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

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

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

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

最后一個實驗是一個大雜燴，把前面講的所有知識都混雜起來。不過要知道的是，上面講的很多最佳實踐在一個草稿或者小型項目里難見分曉，只有在大項目里才能顯露崢嶸。

因此，最后一個項目我是建議建立一個自己的作品剪輯網站，作為一個前端開發者，個人網站就是自己的電子名片。這里會展示你的作品與項目的積累，也是一個回溯你發展的進程與開發履歷的地方。

可以參考Adham Dannaway的文章 My (Simple) Workflow To Design And Develop A Portfolio Website來從零開始。

當HTML與CSS已經是小菜一碟，你就算是進入了前端開發者的殿堂，一個不斷發生改變的地方。

這里推薦一些博客或者期刊，你可以隨時關注：

CSSTricks

Smashing Magazine

Designer News

Nettuts+

CSS Wizard

最后，一般來說，最好的學習方式呢就是跟著例子來，這里再安利一波別人家的公司的樣式與命名規范。

Mapbox

LonelyPlanet

SalesForce

MailChimp

CSS Guidelines

Github internal CSS toolkit and guidelines

AirBnB’s CSS Styleguide

我的前端之路

百度前端訓練營