前端開發，從草根到英雄（上）

作者：解牛_馮雅傑

原文鏈接：前端開發，從草根到英雄（第一部分）

我還記得當我剛開始學習前端開發時，我被大量的技術文章淹沒，當時讓我非常困惑的是：我究竟需要學多少知識才算足夠，我甚至不知道從哪裡開始。

這篇指南會告訴你學習前端開發的方向，它會提供一些過去我在學習中遇到的非常有效的學習資源，並伴隨著我的一些註解。

為了讓這篇指南更容易消化，我將它分成了兩部分，第一部分主要講HTML和CSS的開發介面，第二部分主要講Javascript，框架，以及設計模式，如果你對HTML和CSS很熟悉，你可以直接跳到第二部分，那裡全都是Javascript。

HTML和CSS基礎

在前端開發中，所有事物都以HTML和CSS開始，HTML和CSS控制了你在網頁上看到的內容，HTML負責網頁內容，而CSS負責樣式和布局。

開始前，讀一讀Mozilla開發網（MDN）上的HTML和CSS入門，MDN將會講解HTML和CSS中重要的概念，另外，每章節僅僅只有一張紙那麼長，另外它還提供交互頁面的鏈接（CodePen和JSFiddle）幫助你學習。

完成這些入門教程後，可以學下CodeAcademy的課程Make a Website。完成這篇教程只需要幾個小時，它是使用HTML和CSS構建網站很好的入門教程，如果你停不下來，CodeAcademy還提供了另一個入門教程Building web forms，可以幫助你創建一個帶有樣式的表單。

如果想要做一些CSS的練習，試試CSS Diner，它是一個有趣的CSS挑戰遊戲，另外一個重要的HTML和CSS概念是布局，LearnLayout是一個教你如何使用HTML和CSS創建布局的互動式教程。

同樣的，要學會利用Google字體API使用Google字體的CSS技巧，Typography是一個排版組織（block of interfaces），如果你有時間，我強烈建議你讀一讀這本免費的在線書籍Professional Web Typography，作者是Donny Truong，你將學到作為前端工程師所需要了解的所有排版知識。

通過這些資源後，不要擔心自己記不住，而是將你的注意力集中在HTML和CSS在一起是如何工作的。

HTML和CSS基礎練習

目前你對HTML和CSS有了基本的認識，接下來我們玩點更有趣的。這一章節里，會有兩個實驗，它們會教你如何創建網站和界面。我用「實驗」這個詞的目的是：在實驗中，你從失敗中學到的東西將會和你從成功中學到的一樣多

實驗1

第一個試驗中，我們將學習使用CodePen。CodePen是一個前端編輯網站，在那裡，你無需本地保存文件，就可以寫HTML和CSS代碼。當你保存代碼的同時，你便可以進行在線預覽。

CodePen是一個一石二鳥的工具，一方面，他可以幫助你練習HTML和CSS編程，另一方面，你創建了一個可以跟蹤你進步的文件夾。我們還將使用Dribbble，這個網站充滿了設計靈感。

進入Dribbble網站，選擇一些在幾個小時就可以完成的設計，我替你選了幾個幫助你開始：1，2，3，4和5，首先從移動頁面設計開始，因為我覺得它們比pc端頁面簡單，當然，也不用擔心pc端頁面設計會很難。

當你開始動手時，嘗試在CodePen中寫代碼，如果你卡住了，記住StackOverflow是你的朋友，另一種非常有價值的練習則是登錄像Medium，AirBnB或Dropbox這樣的網站，使用Chome中的檢查工具查看這些頁面是如何實現不同的布局和樣式的。然後，仔細研究CodePen中的部分畫筆，同樣，我也挑選了幾個不錯的鏈接：

• Menu App Interface
• Twitter Widget
• Article News Card
• Simple Flat Menu

如果你的「複製品」看起來和「參照物」不太一樣，你也不必灰心，繼續做不同的設計練習，你會發現每次你都會進步。

如果你沒有任何設計背景，說明你的設計之眼沒有被開發出來，一個擁有設計之眼的前端開發工程師能夠很容易分辨好的設計並有能力將其完美複製出來。前不久我寫了一篇關於如何開發設計之眼的文章。

實驗2

希望第一個實驗能給你帶來一些HTML和CSS的信心。在第2個實驗中，我們將看一些網站，然後試圖實現它們的組件。

一些網站會使用CSS框架，或重命名它們的CSS類名，這樣的代碼讀起來非常困難，所以我挑選了一些源代碼很好讀的網站，這些網站擁有良好的設計。

• Dropbox for Business: 試著複製hero段落
• AirBnB: 試著複製頁腳段落
• PayPal: 試著複製導航條
• Invision: 試著複製頁面底部的登錄部分
• Stripe: 試著複製支付部分

同樣的，第2個實驗的重點也不是重建整個頁面。選擇一些像導航條或hero段落這樣的關鍵組件去編碼，對於做什麼組件，我已經在網站列表右邊給出了建議。

你可以在CodePen中做這些實驗或者在本地操作，如果你選擇將其存放在本地，你可以選擇把這個例子工程作為模板下載下來，或者手動抓取這些文件。我建議你使用Atom或Sublime編輯器

同時，請記住在任何頁面，你都可以看見它的HTML和CSS代碼，僅僅只需要右鍵頁面或頁面中的一個組件，點擊檢查，一個HTML在左、CSS在右的面板便會彈出，一旦你完成了或卡住了，也可以使用檢查器對你的HTML和CSS進行對照。

HTML、CSS最佳練習

到目前為止，我們學到了基本的HTML和CSS，下面我們將要進入最佳練習，最佳練習指的是一些能幫助你提升代碼質量的非常規規則。

語義標記

如何寫語義標籤是HTML和CSS的最佳實踐之一，好的語義意味著使用合適的HTML標籤以及有意義的CSS類名，它們可以傳達結構的含義。

例如，h1標籤標記的文字代表它們是很重要的標題，再如footer標籤，同樣告訴我們這部分元素屬於頁面的底部。更進一步，建議你讀一下A Look Into Proper HTML5 Semantics以及關於CSS技巧的文章：What Makes For a Semantic Class Name

CSS命名約定

另一個重要的最佳實踐則是CSS命名約定，像語義標籤一樣，好的命名約定，會傳達出有意義的內容、使我們的代碼具有可預見性、可讀以及可維護。你可以讀一讀這篇文章，講的是不同的命名約定: OOCSS, ACSS, BEM, SMACSS: What are they? What should I use?

我還建議你嘗試使用簡單的命名約定以培養你對它們的直覺感受，因為隨著時間推移，你將探索出那些最適合你的工作方式。想知道Medium這類公司是如何利用BEM這一命名約定的，可以讀下Mediums CSS is actually pretty f*ing good。在那篇文章中，你將了解到創建一組高效的CSS語法是一個逐步迭代的過程。

CSS重置

從邊緣到邊框，瀏覽器具有較小的樣式不一致性。因此，請務必重置CSS。MeyerWeb是一個流行的重置工具。 如果你想更深入，你可以閱讀Create Your Own Simple Reset.css File

跨瀏覽器支持

跨瀏覽器支持意味著您的代碼需要支持最新的瀏覽器。 某些CSS屬性（如轉換）需要供應商前綴才能在不同的瀏覽器中正常工作。 您可以在這篇本章中了解有關供應商前綴的更多信息，CSS供應商前綴。 主要的代價是，您需要在多個瀏覽器（包括Chrome，Firefox和Safari）上測試您的網站。

CSS預處理器和後處理器

自從90年代引入CSS以來，CSS已經走了很長的路。 由於UI系統變得越來越複雜，人們想出了被稱為預處理器和後處理器的工具來管理複雜性。

CSS預處理器是CSS語言擴展，增加了諸如變數，多態和繼承的特性（bells和whistles）。 兩個主要的CSS預處理器是Sass和Less。 在2016年，Sass開始被更廣泛地使用。 Bootstrap，流行的響應式CSS框架，也從Less切換到Sass。 此外，當大多數人談論Sass時，他們實際上在談論SCSS。

CSS後處理器支持在CSS被預處理器手寫或編譯後仍可更改。 例如，一些後處理器（如PostCSS）具有自動添加瀏覽器供應商前綴的插件。

當你第一次發現CSS預處理器和後處理器，它是會引誘你無處不在的使用它們。 但是，建議你從簡單開始，只有在必要時才添加擴展，例如變數和多態。 我之前提到的文章——Medium』s CSS is actually pretty f*ing good——涵蓋了在涉及到預處理器時，使用多少才是合適的相關內容。

網格系統和響應式

網格系統幫助把CSS結構豎直的和水平的排列起來。

像Bootstrap，Skeleton和Foundation這樣的網格框架提供了用於管理布局中的行和列的樣式表。 雖然網格框架很有用，但了解網格如何工作也很重要。 了解CSS網格系統和不要對網路想多了是重要的概述。

網格系統的主要目的之一是為您的網站增加響應能力。 響應性意味著您的網站可以基於窗口寬度調整大小。多次響應是由CSS媒體查詢實現的，CSS規則僅僅適應於特定的屏幕寬度。

您可以在媒體查詢簡介中了解有關媒體查詢的詳情。 另外，因為我們已經進入了移動互聯網時代，請查看Mobile-First Media Queries簡介。

練習HTML和CSS最佳實踐

現在你已經武裝了最佳實踐的武器，我們可以用它來做一些"軍式演習"，下兩個實驗的目標是練習寫乾淨整潔的代碼，以及長期觀察最佳實踐對可維護性和可讀性的影響。

實驗3

第三個實驗是，挑選一個之前的實驗，並使用學到的最佳實踐方法來重構它，重構的意思是編輯你的代碼，讓它變得更容易讀和減少它的複雜性。

最為一個前端開發者，能夠有效的重構代碼是一項重要的能力。寫出高質量代碼是一個不斷迭代的過程。這篇CSS架構：重構你的CSS很好的講述了如何開始重構你的代碼。

當你在重構代碼時，你需要問自己幾個問題：

• 你的類名是否模糊不清？在六個月後嗎，你還會記得這些類名的意思嗎？
• 你的HTML和CSS具有語義嗎？當你在此審視你的代碼時，你還能快速辨別結構和關係的意義嗎？
• 你還在一遍遍的使用十六進位顏色編碼嗎？難道使用Sass變數重構它們不會更能表達它們的意思嗎？
• 你的代碼在Safari上是否和在Chrome上一樣好呢？
• 你可以把你的布局代碼換成想Skeleton這樣的網格系統嗎？
• 你經常用!important標籤嗎？你如何解決這個問題？

實驗4

最後一個實驗將告訴你如何使用你學到的最佳實踐。 然而，最佳實踐的效果往往不明顯，直到您將它們應用到一個更大的項目。

對於最後一個實驗，建立自己的文件夾網站。 作為前端，您的文件夾網站是您最重要的數字資產之一。文件夾是展示您的工作的網站。 更重要的是，這是一個持續的記錄，可以幫助你跟蹤你的進步和發展。所以即使你只有1或2件事可以展示，你也應該把它們放上去。

在開始之前，先學習一下Adham Dannaway的文章，我的（簡單）工作流：設計開發一個文件夾網站。

如果你的文件夾剛開始並不完美，也沒關係，隨著時間推移，文件夾會迭代，最重要的是，你將使用你自己的技能來創造它。

保持更新

雖然HTML和CSS不會馬上過時，但保持最新的技術視野是一件很重要的事情。

下面的網站，博客以及論壇列表很有意思，也很有價值：

• CSSTricks
• Smashing Magazine
• Designer News
• Nettuts+
• CSS Wizard

從例子中學習

最後，最好的學習方式是從例子中學習， 這裡有一套styleguides和代碼約定，將教你如何成為一個更有效的前端。

Styleguides

Web Styleguides是可以在網站上重複使用的CSS組件和模式的集合。從這些Styleguides中要注意的關鍵是，基於HTML和CSS組件的復用, 如何讓你保持DRY原則。

• Mapbox
• LonelyPlanet
• SalesForce
• MailChimp

代碼約定

代碼約定被設計用來提高代碼的可讀性和可維護性。很多像CSS指南這樣的頁面是為了幫助你寫出更好的HTML和CSS代碼。另一些像Github內部CSS工具和指南這樣的頁面提供了高質量代碼的示例

• CSS指南
• Github內部CSS工具和指南
• AirBnb的CSS指南

圓滿

希望在本文結束時，你已經非常熟悉HTML和CSS了，並有一些項目在折騰了。 學習前端的最好方法是建立項目和實驗。 記住，每個前端開發人員都必須從某處開始。 從今天開始比明天更好。

本文是兩部分系列的第一部分。第二篇文章介紹了使用Javascript和JavaScript庫/框架添加交互性。此外，如果你想要我詳細說明任何事情或有任何問題，隨時留言或Tweet給我。

原文：zero to front-end hero

閱讀原文

推薦閱讀：