CSS入門後，我從前端到全棧 | JTalk大前端

「Jtalk大前端」做者專訪旨在推廣掘金優質的大前端做者和他們的優質內容，讓優質的做者和內容被更多的看見。

第一期「Jtalk大前端」做者專訪，咱們邀請的掘金做者是 JowayYoung（掘金主頁 juejin.cn/user/233062… ），CSS 技術領域的專家，也是掘金小冊《玩轉 CSS 藝術之美》的做者。

自我介紹

主要經歷，擅長/關注領域，什麼時候開始學習前端，何種契機開始接觸前端；爲什麼是前端，爲什麼是CSS開始，CSS迷人之處在於哪？

你們好，我是JowayYoung，就任於網易集團互動娛樂事業羣，深耕前端領域多年，擅長HTML/CSS/JS/Web/Node、網絡通信、框架原理、工程架構、性能優化和設計模式等。平常喜歡學習與分享，常常會開發一些小工具提升工做效率和改善生活質量。

很榮幸收到可愛美的小冊姐姐的邀請，作了一次簡而精的訪談。2016年12月，在同部門一位測試小姐姐的熱情推薦下，我註冊了掘金帳號，此刻我應該算是掘金第一批用戶，見證着掘金從零到一成長到如今。如今的掘金往着愈來愈高的方向發展，也是咱們這些老掘友所期待與但願的。

註冊掘金帳號後我一直潛水，天天學習着各位前端大佬的文章。如下是五年多時間在掘金裏所閱讀的文章數量。固然每一篇文章我都會細心閱讀，好的文章都會進收藏夾並作好相關筆記，不是吃灰那種！

通過兩年多的潛水積累，在提高自身能力的同時也想着嘗試寫一篇文章，終於在2019年正式發表了第一篇技術文章《靈活運用JS開發技巧》。後續每次更新文章的週期不是很頻繁，由於每寫一篇文章我都會投入不少精力，少則兩個禮拜多則兩個月。

曾經的我是一位醫學生，沒錯，大學白讀了。也許與許多非科班同窗同樣，從其餘行業轉行到互聯網行業是一件異常困難的事情。因爲大學時期參加過兩次學校網站設計大賽並得獎，因此對網站設計產生了濃厚興趣，在選修課老師的指導下自學了Photoshop和Dreamweaver。有了UI基礎後就開始從編碼下手，種類繁多的編程語言實在讓我眼花繚亂無從下手。PHP從入門到放棄用了7天，ASP從入門到放棄用了1天，Java從入門到放棄用了3天。

在一次與師兄的交流下認識了CSS，CSS的簡單便捷讓我以爲它是打開編程世界的入門鑰匙。嚴格來講CSS不是編程語言，而是一門與HTML同樣的標記語言，但其在瀏覽器下就能直接運行讓我充分意識到入門前端如此簡單。沒錯，入門前端只需會HTML+CSS+瀏覽器，相對其餘編程領域來講，前端真的可認爲是零基礎都能轉行的崗位。所以不少讀者或朋友想轉行編程，我都會推薦TA首選前端。

在入門那段時間，從天天強行記憶臨牀醫學、解剖學、病理學、生理學、心理學的骨頭、血管、神經到天天強行記憶HTML各類標籤、CSS各類屬性、JS各類API。整個過程既艱苦又快樂，編碼帶來的思惟提高遠比其餘想達到的目標更爽，因此我很享受編碼帶來的樂趣，由於整我的的思惟都變得敏銳和有條理性。

從前端到全棧

如今你已經是一名全棧工程師，你以爲前端走向全棧是趨勢嗎？從前端到全棧，你以爲難嗎？你是怎麼一步步轉變的？

從業多年，經歷了前端從簡單的網頁效果發展到複雜的跨端應用，在將來日子裏，前端走向全棧是必然的趨勢。若獲得更多開發者助力，相信前端能在更短期內達到該趨勢。

曾經的JavaScript只是做爲豐富網頁效果的腳本語言，經過植入預設邏輯就能讓網頁生動地動起來，提高用戶體驗。JavaScript自1995年誕生以來，我以爲有六種前端技術讓前端在短期內產生了從量變到質變的跳躍。

• AJAX(2005年)：無需刷新即快速動態更新局部網頁的Web開發技術
• Jquery(2006年)：提供簡便JS設計模式且優化DOM操做、語言加強、事件處理、動畫設計和AJAX交互的JS框架
• Angular(2009年)：提供MVC、模塊化、雙向綁定、依賴注入和語義標籤的JS框架
• Node(2009年)：基於Chrome V8引擎使用事件驅動、非阻塞式I/O模型讓JS運行在服務端的JS運行環境
• React(2013年)：採用聲明範式輕鬆描述應用，經過對虛擬DOM最大限度減小與DOM交互的JS框架
• Serverless(2015年)：無需服務器管理應用程序的構建和運行的概念

基於上述六種前端技術，我將前端發展歷程劃分爲如下階段。每種前端技術都爲當前階段提供了推動做用，將前端從一個層次推升到另外一個層次。每種前端技術在出現時均可能不受重視，隨着時間推移與項目實踐，它可能從衆多技術中突圍而出，所以咱們需保持學習熱情，時刻關注新生技術，同時要有包容心，每種技術的出現必有可用之處，不然就不會出現了。

學習前端的歷程可用如下場景形容😂！我以爲該圖很形象地描述了包括我在內不少前端工程師的學習之路，翻過一個山頭還有一個山頭在等着咱們。

但從前端到全棧，也許需花費兩三年時間。若能制定一份學習導向圖並遵循着某個方向走，我相信從前端到全棧所花費的時間會更少。首先我對全棧的定義是在擁有必定前端開發經驗的前提上有更高級別的工程架構能力和跨端開發能力，若HTML+CSS+JS基礎紮實，相信這不是問題，差的就是方向與路線。

JavaScript相比其餘語言的通用性會更強，所以出現不少滲透領域的優秀框架和運行環境，基於這些框架和環境，咱們可將JavaScript開發的應用部署到對應的平臺上完成更多未知的事情。所以可嘗試在熟悉Web開發的狀況下慢慢轉向Node開發。有了Node開發，咱們從只會網站開發可擴展到服務端開發甚至桌面端開發和移動端開發等更多其餘領域。

就像React和Vue同樣，正是虛擬DOM可做爲兼容層對接原生端或將自身渲染到其餘平臺，纔有了一些對應自身的跨端框架。React在移動端上有React Native在服務端上有next，Vue在移動端上有Weex在服務端上有Nuxt。在充分具有React/Vue開發經驗時，可在這些衍生跨端框架的幫助下慢慢過渡到其餘領域。固然這只是一個學習的方向，每一個人都有適合本身的學習方法，在此就很少說本身的學習方法了，如下我整理一份以本身經歷爲主的從前端到全棧過渡的學習路線。

這幾年來都是按照上圖從左到右慢慢過渡，固然可能會遺漏一些未記錄在裏面的方向，畢竟前端發展太快，本身也一直在學習，但總體方向基本已完善。

簡括CSS

若是讓你用一句話歸納CSS，你會怎麼說？

若讓我用一句話歸納CSS，那麼從兩方面說。正經一點，套用蜘蛛俠電影裏的名言就是能力越大責任越大。頑皮一點，CSS就是網頁版的亞洲四大邪術集合體(中國修圖術、韓國整容術、日本化妝術、泰國變性術)。

簡單來講就是，重視CSS能把CSS玩轉到脫離工做之外的內容，輕視CSS只能寫寫常規樣式用用第三方框架。所以CSS就是畢加索手中的畫筆，用得好很差就看你本身。

以爲CSS簡單的同窗，可能不少場景都是使用UI框架開發，在開發過程當中基本不會考慮如何編寫好CSS或重構CSS，在遇到與需求有出入的狀況頂多就使用樣式覆蓋的方式暴力解決。以爲CSS困難的同窗，大多數狀況是依據設計師提供的設計圖還原切片圖層，需考慮不少設計規範的問題，甚至一套樣式規範應用到各類屏幕上，增長了CSS在適配上的難度。

至今已不少同窗忽略了CSS的重要性，CSS做爲一門標記語言，甚至可認爲是前端的入門鑰匙，它帶給咱們不只是用來寫寫樣式那麼簡單，而更可能是它背後隱藏的祕密與技巧。因此我在2020年花了半年私人時間寫了一本掘金小冊《玩轉CSS的藝術之美》闡釋我對CSS的見解與思考，但願能將這門入門前端的語言發揚光大，讓你們對它另眼相看。個人CodePen主頁就是我熱愛CSS的最好證實，畢竟CSS讓我有了興趣有了工做有了方向有了目標。

CSS學習建議

CSS可算是前端入門技術，有何建議給到剛開始學CSS的同窗嗎？怎麼開始，特別關注什麼，有什麼高效方法嗎？

在訪談裏我一直強調CSS由於簡單易用而很適合入門前端。基於本身之前盲目學習走了不少彎路，如今回過神發現其可有更好的方法去學習CSS。仍是那句，學習方法只有適合本身的，但學習路線可適合更多人。

在此，我基於以前寫的掘金小冊《玩轉CSS的藝術之美》整理了CSS裏最重要的內容，以思惟導圖的形式展現。不知爲什麼，我最近很喜歡畫思惟導圖。

深刻學習CSS可結合上圖與《玩轉CSS的藝術之美》一塊兒學習，效果會更佳。只有不斷嘗試使用CSS作一些有趣的事情，才能讓本身保持對CSS的興趣。另外，你們可多關注CodePen這個網站，裏面有不少意想不到的CSS Demo，每學習一個CSS Demo都能找到有趣的點，對提高本身的CSS編碼能力有極大幫助。

善用工具也是一個很好的學習習慣，如下是我常用到有關CSS技術的工具。每一個工具都有本身的特點，相信在進階CSS的過程當中能幫上大忙。

• CodePen：代碼演示
• Caniuse：瀏覽器兼容性
• CssTriggers：CSS觸發
• CubicBezier：貝塞爾曲線
• Flexbox：Flex佈局
• StatCounter：瀏覽器統計

另外，關注一些熱衷於研究CSS的做者對本身學習CSS也有必定幫助，畢竟他們都會按期分享一些有趣的CSS技術文章。

• 張鑫旭
• Chokcoco
• 我-JowayYoung

最後作一個小小的CSS學習總結：不搞IExplorer兼容，就無兼容問題。不是開玩笑的，我是來真的😬！

• 掌握CSS核心知識點：盒模型、格式化上下文、文檔流、優先級別、佈局方式
• 善於使用輔助工具，例如一些圖形化工具能幫助咱們更好地理解CSS的某些屬性與使用場景
• 關注熱衷於研究CSS的做者，多與你們一塊兒交流CSS
• 在CodePen上註冊一個帳號，關注更多有趣的CSS Demo，遇到喜歡的效果立馬收藏再學習
• 拒絕兼容IExplorer，只有廣大開發者助力才能完全拋棄萬惡的IExplorer

前端學習建議

在學習CSS過程當中遇到過什麼難點，你當時是怎麼解決的，可給到你們一些參考和建議嗎？平時本身是怎麼學習和提高的呢？

開始學習前若決定自學，會發現互聯網上充斥着各類資料和課程，不少都是在現階段並不能徹底理解的資料和課程。重要是開始前，需制定一個有計劃性和有結構性的學習路線，從而避免由於資料和課程的方向不對，又改變學習路線這種浪費時間的狀況存在。例如上述我整理的學習路線，有一個明確的方向才能確保在正確的時間作正確的事情。

做爲一位碼農，必須註冊一個GitHub帳號。做爲全球最大的基友交流網站，在裏面能發現不少牛人和項目，這些都是在學習路途裏重要的添加劑，能在某些時候將本身的技術水平推動到一個全新的層次。若本身有不錯的項目可發佈到GitHub上，讓全世界程序猿圍觀。

接下來我作幾點建議，很適用前端初學者和進階者。

選擇一個在行業裏比較具有導向性的網站做爲學習基地。文章類型網站首選掘金，視頻類型網站首選慕課。這多是你前期的主要學習途徑，可以規避盲目尋找資料和課程而浪費時間，爲之後學習提供了一個良好的學習環境和學習基礎。

上機操做，上機操做，上機操做，重要事情只說三遍。所謂只學習不練習的人都是在耍流氓。學習之餘儘可能讓本身儘量地多練習，讓本身更好地掌握所學知識，天天進步一點點，時間會讓你知道，你會變得多麼優秀。不少讀者常常問我，進階到高級前端需多久，這個就看人了。努力一點一兩年就行，懶惰一點十年都未必行。

當積累必定經驗後，可爲本身尋找一個特定場景，利用所學前端技術作一個在真實開發場景下的項目，目的就是鞏固和提示所學知識。固然還可發佈到Guthub上，讓全世界程序猿圍觀。畢竟好的項目須要推廣，整個過程還可能獲得不一樣人的指導或建議，真的會受益不淺。

最後就是在業餘時間可將本身所學知識和所得經驗寫成文章併發布到技術社區。此時掘金就爲咱們提供了這個平臺，不一樣層次的前端開發者都在這裏分享他們的知識，你天然而然能夠在這裏找到進步靈感和將來方向。曾經個人也是一名潛水者，現在能根據思路寫出一篇完整且能幫助到他人的文章，既溫故知新也助人爲樂，這就是分享的樂趣。

堅持寫做

你怎麼看待技術寫做，爲什麼會持續穩定的技術寫做，可分享下心得嗎？最後，你想對咱們的讀者同窗說些啥呢？堅持學習？堅持寫做？或者你最近關注的領域學習心得。

做爲一名合格的程序猿，當技術積累到必定程度時，經過博客的形式將本身所學所得展現出來，會是一件多重收穫的事情。技術寫做可能比初中高中寫做要稍簡單一些，畢竟選題自定。

不知不覺我已堅持了2年的技術寫做，無論是學習筆記、我的博客，仍是內部分享，我都會盡本身最大努力作好，每一次技術寫做都意味着溫故知新。若能堅持技術寫做，我以爲能收穫如下幾方面。

• 堅持技術寫做能讓頭腦和思惟更敏捷更有條理性
• 堅持技術寫做能發展到對待任何事物都會有快速分析得知有用信息的效果
• 堅持技術寫做技既能溫故知新也能幫助他人，一箭雙鵰
• 堅持技術寫做能廣交同行，認識更多不一樣層級的大佬，對本身進階幫助更大
• 堅持技術寫做能讓本身更自律更自信，對待文字更敏感

曾經的我很怕技術寫做，由於寫一篇文章真的不容易。剛開始技術寫做遇到的第一個問題就是無從下筆，這個無從下筆多是選題猶豫不決或總體思路不夠清晰。每每是這個問題致使不少人在第一步就放棄技術寫做，因此爲什麼技術社區永遠都是讀者比做者多。而解決這個問題就需把選題和總體思路兩個重點解決。

首先是選題，打開掘金的標籤管理，會發現100多個標籤。這麼多標籤，怎樣選題呢。這個問題我思考過好久，因此我將這些標籤歸爲如下十四大類。

這樣選題方向就明確了。例如選擇CSS，那麼咱們可寫盒模型、經常使用佈局方式、水平垂直居中方式等話題。例如選擇框架原理，那麼咱們可寫React/Vue開發經驗、React/Vue源碼閱讀、React/Vue運行機制等話題。選擇一個想寫的話題就已完成第一步了。可從上述大方向肯定技術文章方向，再肯定你擅長的話題。

第二步就是確認文章總體思路。我將一篇技術文章的總體思路歸類爲如下幾點且按照順序排版。

• 前言：一般以話題的技術背景爲主，通常是引出在未使用該技術前的背景，可分析該背景的一些缺點或劣勢，進而慢慢鋪墊出你要表達的話題；
• 分析：一般基於現狀分析話題的優勢或優點，可列舉一些成功案例加以印證話題的可靠度，或經過一些使用場景說明話題的通用性；
• 編碼：做爲文章主體最重要的部分，也是技術文章裏承上啓下的部分，經過展示一些核心代碼並添加解析，分析爲什麼這樣處理，爲什麼這樣封裝，爲什麼這樣使用；
• 步驟：該點無關緊要，是編碼的一項補充，若話題總體編碼量較多可經過分步說明，增長更多細節爲讀者解讀，對昇華技術文章有必定的做用；
• 示例：目的是幫助讀者瞭解話題所表達的實際使用場景，一項技術是否普及需必定的實際使用場景支持，經過示例拉近讀者對話題的感覺；
• 疑問：話題所引伸的技術無論如何高超確定會存在疑難雜症，需填坑挖坑，這個過程很重要，若推廣話題能順便將話題裏產生的坑填了，相信更多讀者會認同話題的可靠性；
• 總結：全文最重要的一點，話題的展開需總結性地收尾，總結話題能讓話題的總體性提高更高的層次，以幾點總結性的話歸納讀了本文的收穫是什麼，學到什麼。

以我發表的這篇《嗯，手搓一個TinyPng壓縮圖片的WebpackPlugin也SoEasy啦》爲例，個人目的就是輸出一篇如何寫好webpack擴展器的教程。依據上述技巧，可一步一步延伸出整篇文章所表達的話題。發現掘金大部分文章都是以這樣的形式寫做，若能勇敢邁出第一步，相信你在不久的未來也能輸出更多高質量文章，輸出技術文章，既溫故知新也助人爲樂，這就是分享的樂趣。

福利到

第一期「Jtalk大前端」做者專訪內容就是這些啦

你們有問題能夠在評論區留言

會召喚做者來回答你們的提問哦

另外送一個福利🎉🎉🎉

評論區抽一個掘友送一個 掘金新款追邊T恤

若是你也是前端學習者

掃碼回覆 「前端」進掘金前端做者羣

另外轉發文章到朋友圈截圖發給掘金醬

還能夠領取 《玩轉CSS藝術之美》小冊

五折優惠碼✌✌✌

歡迎大前端優質做者帶上本身的掘金主頁自薦

下一期再見👋