摘要：整個(gè)系統(tǒng)變得日益繁復(fù)，人們也會(huì)去選擇使用一些預(yù)處理器或者后處理器來(lái)管理這種復(fù)雜性。的預(yù)處理器或者語(yǔ)言的擴(kuò)展會(huì)在無(wú)聲無(wú)息之間提供類似于變量以及繼承這些特性。最主要的兩個(gè)的預(yù)處理器就是與。

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

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

前兩天才翻譯了一篇文章：解決你的前端面試，這類型的文章都是關(guān)于前端的一些基礎(chǔ)知識(shí)的，不過(guò)文章里的鏈接都是外文資料，更多的會(huì)學(xué)習(xí)的是思想吧和知識(shí)點(diǎn)列表。對(duì)于前端，或者更廣泛的說(shuō)的客戶端開(kāi)發(fā)的知識(shí)點(diǎn)圖譜還是推薦下這個(gè)。筆者打算先寫完 React+Redux+Webpack的系列筆記和實(shí)戰(zhàn) 然后就把這些學(xué)習(xí)鏈接看看整理找一些中文的或者自己整理一些放出來(lái)，不過(guò)估計(jì)應(yīng)該也有大神寫了現(xiàn)成的，歡迎分享給我。

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

前端的領(lǐng)域里，任何東西都離不開(kāi)HTML 與 CSS。HTML與CSS基本上控制了你看到的所有東西，HTML用來(lái)定義內(nèi)容而CSS負(fù)責(zé)樣式與布局。

首先從HTML 以及 CSS 開(kāi)始，這里推薦的是MDN的官方指南。MDN對(duì)于重要的HTML與CSS內(nèi)容進(jìn)行了詳細(xì)條理的闡述，除此之外，每一章都是多帶帶的一頁(yè)，提供了在CodePen與JSFiddle展示的Demo。

看完了這些基礎(chǔ)教程之后，可以來(lái)看看由CodeAcademy提供的tMake a Website系列課程。這個(gè)課程只要幾個(gè)小時(shí)就能看完，如果你想要更多的鍛煉，可以瞅瞅CSS Diner，這是一個(gè)CSS挑戰(zhàn)的小游戲。

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

國(guó)內(nèi)用不了Google Fonts的話可以參考下FontAwesome，如果你要用中文字體的話建議參考FontSpider，請(qǐng)自行Github搜索。

Typography--排版也是個(gè)構(gòu)建界面時(shí)候很重要的部分，有時(shí)間的話推薦你看看Donny Truong寫的Professional Web Typography這本書(shū)，它會(huì)教你基本上關(guān)于排版的所有東西。在學(xué)習(xí)這些的時(shí)候不要太擔(dān)心自己會(huì)忘了，反正記不住。你應(yīng)該著重于記錄這些并且理解HTML和CSS是怎么工作的。

到這里你應(yīng)該已經(jīng)明白了HTML與CSS的基本使用，下面我們要學(xué)以致用了。這一部分就設(shè)計(jì)了兩個(gè)小實(shí)驗(yàn)來(lái)讓你自己動(dòng)手構(gòu)建網(wǎng)站與界面。我是把它們形容成實(shí)驗(yàn)，所以不要害怕失敗。

第一個(gè)實(shí)驗(yàn)里，我們用的是CodePen，一個(gè)在線的HTML與CSS實(shí)驗(yàn)臺(tái)。同時(shí)也提供了實(shí)時(shí)預(yù)覽功能，一石二鳥(niǎo)呦。好了，下面我們要看看我們做的界面的原型了，轉(zhuǎn)到 Dribbble吧, 這嘎達(dá)可全是設(shè)計(jì)創(chuàng)意啊。

我是看上了這個(gè)系列：1, 2, 3, 4, 以及 5.。我選擇了一個(gè)移動(dòng)優(yōu)先的設(shè)計(jì)是因?yàn)榕c桌面設(shè)計(jì)相比更簡(jiǎn)單一點(diǎn)，不過(guò)你也可以自己找一個(gè)。

在你選定了設(shè)計(jì)之后，就可以在CodePen上面開(kāi)始動(dòng)手了。你也可以看看其他人設(shè)計(jì)的Pen： pens on CodePen. 另外，別忘了StackOverflow ，這可是你的小伙伴呦。如果你最后實(shí)現(xiàn)的東西跟設(shè)計(jì)相去甚遠(yuǎn)，也不要灰心，不斷嘗試總會(huì)提高的。

經(jīng)過(guò)實(shí)驗(yàn)一估計(jì)你已經(jīng)有點(diǎn)自信了，在實(shí)驗(yàn)二里面我們將會(huì)先借鑒一些大公司的經(jīng)典站點(diǎn)。有不少站點(diǎn)會(huì)用一些CSS框架或者混淆它們的CSS類名，這會(huì)讓源代碼的閱讀比較麻煩，這嘎達(dá)我列舉了幾個(gè)源代碼可讀性比較好的：

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

再次強(qiáng)調(diào)下，實(shí)驗(yàn)二的目的并不是讓你去重構(gòu)整個(gè)頁(yè)面，而是知道怎么去分割組件以及人家是怎么做的。如果你沒(méi)有設(shè)計(jì)的背景，可能你要好好發(fā)掘下你的潛能了。一個(gè)優(yōu)秀的前端開(kāi)發(fā)者要能夠辨別好的設(shè)計(jì)然后完美地重現(xiàn)它們，可以參考下我的這篇文章：develop your design eye.

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

好了，現(xiàn)在你已經(jīng)能夠用HTML與CSS做一些簡(jiǎn)單的事情了，下面就要看看所謂的最佳實(shí)踐了。最佳實(shí)踐實(shí)際上就是一系列的在日常開(kāi)發(fā)中總結(jié)出來(lái)的約定俗成的規(guī)范的集合，來(lái)讓你更快地開(kāi)發(fā)與構(gòu)建更高質(zhì)量的代碼。

HTML與CSS最佳實(shí)踐中重要的一條就是怎么來(lái)寫出有語(yǔ)義可讀性的標(biāo)記。好的語(yǔ)義即是你使用了合適的HTML標(biāo)簽與CSS的類名來(lái)傳達(dá)出你想表達(dá)的結(jié)構(gòu)含義。

譬如 h1 標(biāo)簽會(huì)告訴我們里面包裹的是一些很重要的標(biāo)題信息，另一個(gè)例子就是footer 標(biāo)簽，會(huì)直截了當(dāng)?shù)馗阏f(shuō)，這里面是包含一些頁(yè)腳信息。建議你閱讀 A Look Into Proper HTML5 Semantics 以及CSSTricks的 What Makes For a Semantic Class Name。

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

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

不同的瀏覽器在譬如margin以及l(fā)ine-height這些小的樣式點(diǎn)之間存在著一些不一致性，因此你要學(xué)會(huì)重置你的CSS環(huán)境。 MeyerWeb 就是一個(gè)常見(jiàn)的重置手段，如果你想深入了解下，推薦你閱讀 Create Your Own Simple Reset.css File這篇文章。

跨瀏覽器支持意味著你的代碼要去支持絕大部分的現(xiàn)代瀏覽器，一些常見(jiàn)的CSS屬性，譬如 transition 需要 vendor prefixes 來(lái)運(yùn)行在不同的瀏覽器中。你可以在 CSS Vendor Prefixes這篇文章里獲取更多的知識(shí)。這就意味著你需要花費(fèi)更多的時(shí)間來(lái)在不同的瀏覽器之間進(jìn)行測(cè)試。

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

CSS后處理器則對(duì)于手寫的CSS文件或者經(jīng)過(guò)預(yù)編譯的CSS文件進(jìn)行一些處理，以著名的PostCSS 為例，它有一個(gè)插件可以幫你自動(dòng)地添加一些渲染前綴。

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

網(wǎng)格系統(tǒng)即是用來(lái)水平或者垂直地排布元素的CSS架構(gòu)。

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

網(wǎng)格系統(tǒng)另一個(gè)目標(biāo)就是是你的網(wǎng)站具有響應(yīng)式特性。響應(yīng)式意味著你的網(wǎng)站可以根據(jù)屏幕的大小來(lái)動(dòng)態(tài)調(diào)整你網(wǎng)站大小與布局。很多時(shí)候這個(gè)響應(yīng)式特性都是基于CSS media queries, 即根據(jù)不同的屏幕大小選用不同的CSS樣式規(guī)則。

你可以看一下 Intro to Media Queries來(lái)了解更多。另外，因?yàn)槲覀冋谶M(jìn)行一場(chǎng)所謂mobile-first變革，推薦你看下An Introduction to Mobile-First Media Queries。

恭喜道友，筑基成功，你已經(jīng)能夠了解一些關(guān)于HTML與CSS的最佳實(shí)踐了，下面又到了學(xué)以致用的時(shí)間。這里的兩個(gè)實(shí)驗(yàn)主要是讓你鍛煉下編寫整潔的代碼和保證長(zhǎng)期的可讀性與可維護(hù)性。

實(shí)驗(yàn)3中，你需要選一個(gè)你之前自己做的項(xiàng)目并且用上文中提及的最佳實(shí)踐去重構(gòu)它們，從而保證你的代碼更易讀并且更簡(jiǎn)潔。掌握如何有效地重構(gòu)代碼是前端開(kāi)發(fā)者的一個(gè)重要技能。當(dāng)然，寫出高質(zhì)量的代碼并非一蹴而就，而是需要一個(gè)長(zhǎng)期的迭代過(guò)程，CSS Architectures: Refactor Your CSS這篇文章就是一個(gè)不錯(cuò)的學(xué)習(xí)起點(diǎn)。

當(dāng)你決定要重構(gòu)代碼之前，你要先捫心自問(wèn)以下幾點(diǎn)

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

你的HTML與CSS是否足夠語(yǔ)義化，一眼望去是否就能明白你的代碼架構(gòu)與關(guān)系意義？

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

你的代碼是否能夠在Safari與Chrome都能正常運(yùn)行？

能否用像Skeleton這樣的網(wǎng)格框架來(lái)代替你自己的布局?

你是不是經(jīng)常使用了!important?

最后一個(gè)實(shí)驗(yàn)是一個(gè)大雜燴，把前面講的所有知識(shí)都混雜起來(lái)。不過(guò)要知道的是，上面講的很多最佳實(shí)踐在一個(gè)草稿或者小型項(xiàng)目里難見(jiàn)分曉，只有在大項(xiàng)目里才能顯露崢嶸。

因此，最后一個(gè)項(xiàng)目我是建議建立一個(gè)自己的作品剪輯網(wǎng)站，作為一個(gè)前端開(kāi)發(fā)者，個(gè)人網(wǎng)站就是自己的電子名片。這里會(huì)展示你的作品與項(xiàng)目的積累，也是一個(gè)回溯你發(fā)展的進(jìn)程與開(kāi)發(fā)履歷的地方。

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

當(dāng)HTML與CSS已經(jīng)是小菜一碟，你就算是進(jìn)入了前端開(kāi)發(fā)者的殿堂，一個(gè)不斷發(fā)生改變的地方。

這里推薦一些博客或者期刊，你可以隨時(shí)關(guān)注：

CSSTricks

Smashing Magazine

Designer News

Nettuts+

CSS Wizard

最后，一般來(lái)說(shuō)，最好的學(xué)習(xí)方式呢就是跟著例子來(lái)，這里再安利一波別人家的公司的樣式與命名規(guī)范。

Mapbox

LonelyPlanet

SalesForce

MailChimp

CSS Guidelines

Github internal CSS toolkit and guidelines

AirBnB’s CSS Styleguide

我的前端之路

百度前端訓(xùn)練營(yíng)