[譯] 前端攻略-從路人甲到英雄無敵

時間 2019-11-05

標籤前端攻略路人英雄無敵简体版

原文原文鏈接

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

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

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

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

HTML 與 CSS基礎

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

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

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

最後，能夠看看怎麼使用 Google Fonts，參考下 CSSTricks出的Basics of Google Font API。編程

國內用不了Google Fonts的話能夠參考下FontAwesome，若是你要用中文字體的話建議參考FontSpider，請自行Github搜索。bootstrap

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

Practicing HTML and CSS Basics

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

Experiment 1

第一個實驗裏，咱們用的是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

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

你能夠選擇在線編程：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定一個合適的類名。好的命名習慣，譬如語義化的標記，能夠更好地傳達含義，讓代碼的可讀性與可維護性大大增長。你能夠瞅瞅OOCSS, ACSS, BEM, SMACSS: what are they? What should I use?這篇文章裏說起的CSS的一些命名的習慣。

整體來講，個人建議是跟着你的直覺來肯定命名習慣，隨着時間的發展你會以爲這樣看上去很舒服。若是你要看看大公司，譬如Medium是怎麼實踐BEM這樣的命名規範的，能夠閱讀 Medium’s CSS is actually pretty f*ing good這篇文章，在這裏你會學到怎麼在一個快速迭代地狀況下也維護你的有效地CSS命名習慣。

CSS Reset

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

Cross Browser Support

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

CSS Preprocessors and Postprocessors

翻開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這篇文章。

Grid Systems and Responsiveness

網格系統便是用來水平或者垂直地排布元素的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。

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已是小菜一碟，你就算是進入了前端開發者的殿堂，一個不斷髮生改變的地方。

這裏推薦一些博客或者期刊，你能夠隨時關注：

Learn by example

最後，通常來講，最好的學習方式呢就是跟着例子來，這裏再安利一波別人家的公司的樣式與命名規範。